Question

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

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

Link函数打印变量name但插值器不评估{{name}}。我在我的自定义指令的控制器中设置了隔离范围。仍然由于某种原因，范围变量不会持续存在。这种行为有望吗？如果是这样，设置范围变量的正确方法是什么？

非常感谢帮助。

Answer 1

使用'='绑定从您的外部范围将'name'导入您的隔离范围：

// 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: {}）时，您将创建一个不从父范围原型继承的私有范围。您可以将隔离范围视为指令的私有沙箱。

由于您的指令范围是隔离的，因此您需要通过属性绑定将范围变量从父范围导入隔离范围。在这种情况下，我们在父范围变量'name'和指令的隔离范围变量之间建立双向绑定。

Answer 2

您的指令控制器将名称分配给指令的isolated scope。所以你有两种可能性：

从指令中删除scope: {}以不创建隔离范围。虽然这可能不是你想要的，因为你的指令修改了外部范围。
将模板添加到包含<h1>Hello {{name}}</h1>的diective中。请参阅此plunker。

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

2 个答案: