指令中具有隔离范围的“控制器作为”不隔离答案

【问题标题】："controller as" with isolate scope in directives not isolating指令中具有隔离范围的“控制器作为”不隔离
【发布时间】：2016-09-19 19:01:12
【问题描述】：

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

我正在尝试创建一个具有隔离范围的指令示例，其中控制器范围不可见，以便我可以通过将它们添加到“范围：{}”来选择性地公开它们。在此示例中，我期望得到的是“名称：街道：”，因为 ctrl.customer 应该对指令不可用。然后稍后我将“客户：'='”添加到“范围：{}”，我会得到“名称：大卫街：123 任何街道”。不幸的是，我从这个指令中得到了“名称：大卫街：123 任何街道”。

我尝试过的事情：

设置“bindToController: true”
删除“范围：{}”并设置“bindToController：{}”（因此我添加了“客户：'='”）
设置“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>

【问题讨论】：

你错了。隔离范围的重点是确保指令范围与外部范围隔离，即使用指令的视图范围。如果一个指令有自己的controllerAs，并且控制器暴露了数据，那么指令当然可以访问这些数据。
或者说这个指令有点不同，控制器是它的作用域，所以无论你放什么东西都可以立即访问

标签： angularjs angularjs-directive angularjs-scope

【解决方案1】：

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

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

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

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

这意味着如果sharedScope 指令没有控制器并且父指令有Controller 控制器，则此

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

将导致

名称：街道：

输出。

【讨论】：

好的。这看起来像我想要使用的。我正在关注一个使用 $scope 而不是“Controller as”的教程，所以我一直在尝试将所有代码转换为现代语法，因为我遵循教程。
如果我使用它，那么我将如何修改我的指令以访问该控制器？我尝试了 'scope:{customer:'='}' 但没有得到任何东西，并且 'scope:{ctrl.customer:'='} 给了我一个错误。
当绑定作为scope:{customer:'='} 提供时，预计绑定的范围属性将作为属性从父范围传递给隔离，就像<div ng-controller="Controller as parentCtrl"><shared-scope customer="parentCtrl.customer"></shared-scope></div> 一样。假设sharedScope 在此设置中应该有一个与Controller 不同的控制器（例如一个空函数）。
效果很好。当我注释掉 customer: '=' 然后客户数据再次丢失。我注意到我可以直接传入我的客户对象并跳过控制器。我的最终目标是通过具有不同类别对象的数组进行 ng-repeat，并根据对象类别进行不同的显示。大概我可以使用一个指令来做到这一点，该指令具有一个模板，该模板使用附加到标识符的 ng-show 为每个类别的对象提供不同的显示。
ng-switch 或 ng-if 在您的情况下可能比 ng-show 更有效。