如何在指令范围中仅隔离单个值？

I have an AngularJS directive that has a non-isolated scope. I do, however, have one variable that I would like to be isolated to only the directive (it is an "isOpen" flag). For instance:

我有一个AngularJS指令,它具有非隔离范围。但是,我确实有一个变量,我希望仅与指令隔离(它是一个“isOpen”标志)。例如:

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

...gives me an isolated scope. I need to be able to assign a controller somewhere before myDir and have the scope of that controller be available inside myDir while at the same time isolating scope.isOpen so that I can have multiple instances of this directive on one page.

......给了我一个孤立的范围。我需要能够在myDir之前的某个地方分配一个控制器,并且在myDir中可以使用该控制器的范围,同时隔离scope.isOpen,这样我就可以在一个页面上拥有该指令的多个实例。

1 个解决方案

#1

The scope of the parent controller is available inside of your directive, even if you've isolated the scope via the $parent property on your directive's scope.

即使您通过指令范围内的$ 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.
        }
    }
});

Be careful though... it becomes very easy to tightly couple your directives and controllers in this manner. In most cases, you're probably better off linking properties of your scopes with your scope declaration and attributes in your markup like so:

但是要小心......以这种方式紧密耦合指令和控制器变得非常容易。在大多数情况下,最好将范围的属性与范围声明和标记中的属性链接起来,如下所示:

The directive:

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.
        }
    }
});

The markup:

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

Your controller:

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

#1