AngularJS 指令控制器作为语法和范围答案

【问题标题】：AngularJS Directive controllerAs syntax & scopeAngularJS 指令控制器作为语法和范围
【发布时间】：2014-05-05 20:42:30
【问题描述】：

这是我的代码：

// HTML

<body>
  <h1>{{foo.name}}</h1>

  <my-directive></my-directive>
</body>

// 脚本

app.directive('myDirective', function() {
return {
    restrict: 'E',
    replace: true,
    scope: true,  //**********
    template: '<h4>{{foo.name}}</h4>',
    controllerAs: 'foo',
    controller: fooCtrl,
    link: function(scope) {
        console.log(scope);
    }
}
});

var fooCtrl = function() {
    this.name = 'FOO';
}

我的问题：

如果我使用controllerAs 语法并且没有在myDirective 中设置scope: true，控制器将变为全局，因此控制器会将foo.name 插入Tag。但是一旦我将范围设置为 true，控制器将仅适用于 myDirective。

这怎么会发生？指令内部的控制器是否会创建一个从周围范围继承的新范围？为什么它会应用于全球？

更新

这是一个非常愚蠢的问题，因为我之前总是使用隔离范围，所以忘记指令内部范围的使用，阅读文档并清楚地理解。谢谢解答

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

我猜您是在询问有关 Angular 指令中的范围属性的问题。另外，我认为您的意思是 $rootScope 术语“全局”。如 this guide 中所述，在指令中，作用域属性的行为如下，

scope.false

不为指令创建新范围的默认选项但与其父级共享范围

scope.true

创建一个新范围，但原型继承自父范围。

范围：‘隔离’

创建一个不从原型继承的隔离范围父范围，但您可以使用 scope.$parent
访问父范围

【讨论】：

【解决方案2】：

查看directive documentation 并向下滚动到关于scope 选项的部分。将 scope 设置为 true 会创建一个新的控制器附加到的范围。不设置作用域会将其默认为 false，这会导致指令使用父作用域。这就是控制器被附加到父作用域的原因。

【讨论】：

谢谢，乔恩。我一直在想，在指令内部，控制器将仅适用于它的范围，将范围设置为 true 只需在指令范围下创建一个“子”范围。 >.