Question

我的代码中遇到了一些奇怪的结果。例如，当您注释掉隔离范围行（scope: {local:'='}）时，该指令的范围具有本地值，但是当您链接这两个范围时，本地值显然会发送到父范围，它在指令范围内被删除了吗？

http://plnkr.co/edit/uBkCmnRQoj4B539nAkeW?p=preview

angular.module('My', [])
  .controller('ctrl', function($scope){
    $scope.parent = 2;
  })
  .directive('directive', function(){
    return {
      scope: { local: "=" }, // comment out this line... wtf?
      link: function(scope, el, attr, ctrl){
        scope.local = 88;
        scope.doIt = function(){
          scope.local = 77;
        };
      }
    };
  });

和

  <body ng-app="My">
    <div class="ctrl" ng-controller="ctrl">
      <h3>ctrl</h3>
      parent: {{parent}}
      <div directive local="parent" class="directive">
        <h3>directive</h3>
        <div>local: {{local}}</div>
        <button ng-click="doIt()">click</button>
      </div>
    </div>
  </body>

此外，ng-click =＆＃34; doIt（）＆＃34;似乎根本不会发射。

Answer 1

问题不在于范围，而在于如何在HTML中使用范围变量。

默认情况下，指令的范围在嵌套在其中的HTML中不可用。您可以使用转换，但通常会使用模板来处理您在Plunker中所做的事情：

.directive('myDirective', function(){
  return {
    scope: { local: "=" }, // comment out this line... wtf?
    link: function(scope, el, attr, ctrl){
      scope.local = 88;
      scope.doIt = function(){
        scope.local = 77;
      };
    },
    template: '<h3>directive</h3><div>local: {{local}}</div><button ng-click="doIt()">click</button>'
  }
})

Forked Plunker

Answer 2

这里有两个案例。

取消注释作用域部分后，应用程序中会有两个作用域。一个范围是控制器范围（ctrl），第二个范围是使用自定义指令的div范围。它们是完全独立的，并且本身不共享数据。自定义指令范围确实从父范围获取值，因为您明确设置了它（scope: { local: "=" }，local="parent"）。当您在子隔离范围中将local设置为新值时，它也会被复制回原始字段（parent），因为您已指定（local: "="）。如果您只想设置local，那么告诉Angular不要将值从隔离范围复制回父范围（使用@代替=; scope: { local: "@" }）来执行此操作 ngClick指令也不起作用，因为正如我们所说，您的自定义指令范围是孤立的。当您在其中添加doIt时，它在控制器范围内不可用。
当您评论scope: { local: "=" }部分时，现在您的控制器和自定义指令共享相同的范围。现在doIt功能可用。

指令隔离范围中的变量不可用

2 个答案: