javascript - 如何在我的指令范围内只隔离一个值？

Question

我有一个具有非隔离作用域的 AngularJS 指令。但是，我确实有一个变量，我想将其仅与指令隔离(它是一个“isOpen”标志)。例如:

app.directive('myDir', function() {
    return {
        restrict: 'A',
        scope: {},
        link: function(scope, element, attrs) {
            scope.isOpen = false;
        }
    }
});

...给了我一个孤立的范围。我需要能够在 myDir 之前的某处分配一个 Controller ，并使该 Controller 的范围在 myDir 内可用，同时隔离 scope.isOpen 以便我可以在一个页面上拥有该指令的多个实例。

Answer 1

父 Controller 的作用域在指令内部可用，即使您通过指令作用域上的 $parent 属性隔离了作用域。

app.directive('myDir', function() {
    return {
        restrict: 'A',
        scope: {},
        link: function(scope, element, attrs) {
            scope.isOpen = false;
            scope.$parent.whatever; //this came from your containing controller.
        }
    }
});

不过要小心……以这种方式紧密耦合您的指令和 Controller 变得非常容易。在大多数情况下，您最好将范围的属性与标记中的范围声明和属性链接起来，如下所示:

指令:

app.directive('myDir', function() {
    return {
        restrict: 'A',
        scope: {
           propFromParent: '=prop',
           funcFromParent: '&func'
        },
        link: function(scope, element, attrs) {
            scope.isOpen = false;
            scope.$parent.whatever; //this came from your containing controller.
        }
    }
});

标记:

<my-dir prop="foo" func="bar()"></my-dir>

你的 Controller :

app.controller('SomeCtrl', function($scope) {
    $scope.foo = 'test';
    $scope.bar = function() {
       $scope.foo += '!';
    };
});