AngularJS 范围变量不会保留在具有隔离范围的指令中答案

【问题标题】：AngularJS scope variable won't persist inside a directive with isolate scopeAngularJS 范围变量不会保留在具有隔离范围的指令中
【发布时间】：2014-06-19 14:56:11
【问题描述】：

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

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

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

感谢您的帮助。

【问题讨论】：

标签： javascript angularjs angularjs-directive angularjs-scope

【解决方案1】：

使用“=”绑定将“名称”从您的外部范围导入到您的隔离范围中：

// 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”和指令的同名隔离作用域变量之间建立双向绑定。

【讨论】：

整洁，但这在我的情况下不起作用，因为我需要重用相同的指令。我的理解是AngularJS自下而上评估表达式{{name}}，在这种情况下，从隔离范围开始到它的祖先。为什么它不显示已经在指令的隔离范围内的变量name？
这是不正确的。您所描述的是使用原型范围继承来解析范围变量。在这种情况下，您的指令有一个独立的范围。范围继承规则不适用。如果你想通过范围继承来解析 {{name}}，那么在你的指令定义中使用 'scope:true'。
我还想提一下，scope:true 将创建一个新的子作用域，它依赖于作用域继承。 scope:false 不会创建新的子作用域，但它仍然继承自父作用域。

【解决方案2】：

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

从您的指令中删除 scope: {} 以不创建隔离范围。虽然这可行，但它可能不是您想要的，因为您的指令修改了外部范围。
在您的指令中添加一个包含<h1>Hello {{name}}</h1> 的模板。看到这个plunker。

【讨论】：