如何在指令范圍中僅隔離單個值？

Question

我有一個具有非隔離范圍的AngularJS指令。 但是，我確實有一個變量，我希望僅與指令隔離（它是一個“isOpen”標志）。 例如：

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

......給了我一個孤立的范圍。 我需要能夠在myDir之前的某個地方分配一個控制器，並且在myDir中可以使用該控制器的范圍，同時隔離scope.isOpen，這樣我就可以在一個頁面上擁有該指令的多個實例。

Answer 1

即使您通過指令范圍內的$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.
        }
    }
});

但是要小心......以這種方式緊密耦合指令和控制器變得非常容易。 在大多數情況下，最好將范圍的屬性與范圍聲明和標記中的屬性鏈接起來，如下所示：

指令：

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>

你的控制器：

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