javascript - AngularJS 范围变量不会在具有隔离范围的指令中持续存在

Question

我无法在自定义指令的 Controller 中设置范围变量。

请看这个 plkr: http://plnkr.co/edit/KVGVxhgRHxkhCLytkLBv?p=preview

Link 函数打印变量 name 但插值器不计算 {{name}}。我将其设置在具有隔离范围的自定义指令的 Controller 中。仍然出于某种原因，范围变量不会持续存在。这种行为是预期的吗？如果是这样，设置范围变量的正确方法是什么？

感谢您的帮助。

Answer 1

使用“=”绑定(bind)将“名称”从外部范围导入到隔离范围:

// Code goes here
angular.module('test', [])
  .directive('nametag', function() {
    return {
      scope: { name: '='},
      controller: function($scope, $attrs, $log) {
        $scope.name = 'John Doe';
      },
      link: function(scope, elem, attrs) {
        // elem.text(scope.name);
      }
    };
  });

HTML:

<div ng-app="app" ng-init="name='james'>
    <nametag name="name"></nametag>
</div>

当您为指令定义一个独立的范围(通过指定 scope:{})时，您创建了一个私有(private)范围，它不会以原型(prototype)方式从父范围继承。您可以将隔离范围视为指令的私有(private)沙箱。

由于指令的作用域是独立的，因此您需要通过属性绑定(bind)将作用域变量从父作用域导入到独立的作用域中。在这种情况下，我们在父作用域变量“name”和具有相同名称的指令的独立作用域变量之间建立双向绑定(bind)。