Question

我正在尝试学习在AngularJS中构建自定义指令。目前我正在使用AngularJS 1.5.8。

我正在尝试创建一个带有隔离范围的指令示例，其中控制器作用域不可见，这样我就可以通过将它们添加到'scope：{}来有选择地公开它们。在这个例子中，我期望得到的是'Name：Street：'，因为ctrl.customer应该对指令不可用。然后我会在“范围：{}”中添加“customer：'='”，然后我会得到“姓名：大卫街：123街道”。不幸的是，我正在写这个指令的名字：大卫街：大街街123号。

我尝试过的事情：

设置“bindToController：true”
删除“scope：{}”并设置“bindToController：{}”（所以我在其中添加“customer：'='”）
设置“bindToController：false”（不妨，对吧？）
在加载html后反复点击shift-F5，所以请确保我没有缓存旧文件。

testScope.js：

var app = angular.module('scopeModule',[]);

app.controller('Controller',[function(){
    var vm = this;
    vm.customer = {
        name: 'David',
        street: '123 anywhere street'
    };
}]);

app.directive('sharedScope', function() {
            return{
                scope:{},
                template: 'Name:{{ctrl.customer.name}} Street:{{ctrl.customer.street}}',
                controller: 'Controller',
                controllerAs: 'ctrl',
                bindToController: true
            };
});

index2.html：

<!doctype html>
<html ng-app="scopeModule">
    <body>
        <shared-scope></shared-scope>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
        <script src="testScope.js"></script>
    </body>
</html>

Answer 1

Controller是sharedScope指令的控制者。它是一个单一的实体。指令控制器中的this是指令模板中的ctrl，因为控制器和模板都属于指令。

没有理由将指令范围与自身隔离开来。

隔离范围与其他指令的范围隔离。 From the reference：

{...}（对象哈希）：为。创建一个新的“隔离”范围指令的元素。 “隔离”范围与正常范围不同它没有原型继承其父范围。这是在创建可重用组件时很有用，但不应该意外地读取或修改父作用域中的数据。

这意味着如果sharedScope指令没有控制器而父指令有Controller控制器，那么</ p>

  <div ng-controller="Controller as ctrl">
    <shared-scope></shared-scope>
  </div>

将导致

姓名：街道：

输出

“控制器为”，指令中的隔离范围不隔离

1 个答案: