javascript - AngularJS 指令 Controller 的作用域可以从外部指令访问，为什么？

Question

在实验过程中遇到了一些有趣的事情。出于某种原因，我能够从指令外部访问指令声明内指定的 Controller 的范围。

示例代码如下:

myApp.directive('lockToggle', function () {
    return {
        restrict: 'A',
        link: function (scope, elem) {
            elem.bind('click', function (e) {
                scope.locked = !scope.locked;
                scope.$apply();
            });
        },
        controller: function ($scope) {
            $scope.locked = false;
            $scope.hello = function () {
                alert('hello');
            };
        }
    };
});

这是我的标记:

<button lock-toggle>
  Toggle Lock
</button>
<button ng-disabled="locked" ng-click="hello()">
  Click Me!
</button>

当我单击按钮 Toggle Lock 时，Click Me! 按钮会正确禁用和启用。而且，当我单击 Click Me! 按钮时，将调用 Controller 作用域上的方法 hello()。

我的问题是为什么？指令中声明的 Controller 范围不应该与 html 中的指令范围隔离吗？我希望它的行为方式与其他 Controller 相同，例如:

<!--Can't access the scope of MyController-->

<div ng-controller="MyController">
  .    
  .
  <!--CAN access the scope of MyController-->
  .
  .
</div>

<!--Can't access the scope of MyController-->

但出于某种原因，这似乎不适用于我前面的示例。为什么是这样？

Answer 1

您可以决定您的指令范围应该如何表现以及它是否应该从父范围继承:

myApp.directive('lockToggle', function () {
return {
    restrict: 'A',
    scope: {}, // Will create an isolated scope
    link: function (scope, elem) {
        elem.bind('click', function (e) {
            scope.locked = !scope.locked;
            scope.$apply();
        });
    },
    controller: function ($scope) {
        $scope.locked = false;
        $scope.hello = function () {
            alert('hello');
        };
    }
  };
});

目前，您没有指定 scope 属性，它等于 scope:false。因此，该指令不会创建范围。

更多信息

• A very neat lecture on directives
• Angular docs