Question

前段时间，我编写了一个自定义指令，现在在代码中的许多地方都使用了它（无法再对其进行更改）。

它具有公共作用域，直到今天还可以。现在，我想在同一控制器作用域（父作用域）内两次使用同一指令，但需要每个指令（子作用域）具有自己的变量（如隔离作用域），并且彼此之间不匹配。

是否可以插入此指令并明确声明使用隔离范围，即使它首先是使用公共范围创建的也是如此？还是一种将其限制在父控制器内部的方法？还是有其他方法可以做到？

例如。

// Panel directive
angular.directive('panel', function(){
    return {
        restrict: 'E',
        templateUrl: 'panel.html',
        replace: true,
        transclude: true
    }

});

// Parent directive (include more than one 'panel' directives)
angular.directive('parentDirektive'), function() {
    return {
        restrict: 'E',
        templateUrl: 'parent.html',
        replace: true,
        transclude: true,
        scope: {},
        controller: function($scope) {
            // I want to set different value for this variable
            // in each 'panel' direktive I add in 'parent.html'.
            $scope.headline = 'this.should.be.unique.in.each.panel.directive';
        }
    }
});

parent.html

我想通过某种方式设置“ scope.headline”的值每个面板出现的位置都不同（如隔离每个指令中的变量）？但不能将范围更改为声明中的隔离仅在这种情况下才需要它。

<html>
    <body>
        <!-- I want to display 'Title: First Panel' -->
        <panel></panel>

        <!-- I want to display 'Title: Second Panel' -->
        <panel></panel>
    </body>
</html>

panel.html

<html>
    <body>
        <h1>Title: {{$scope.headline}}</h1>
    </body>
</html>

Answer 1

例如，最好是使用隔离范围。

var myApp = angular.module('myApp');

myApp.directive('myDirective', () => ({
    template: `<div>{{vm.aaa}}</div>`,
    controller: 'myDirectiveCtrl',
    controllerAs: 'vm',
    restrict: 'EA',
    transclude: true,
    scope: {
        aaa: "=" // use if you want to pass varuble to the directive
    },
    bindToController: true,
}));
myApp.controller('myDirectiveCtrl', function () {
    console.log(this.aaa); // will come beck undefind
    vm.$postLink = () => {
        console.log(this.aaa); // return the passed value
    };
});

每个指令都有其应有的范围

<my-directive aaa="'77'"></my-directive>
<my-directive aaa="'99'"></my-directive>

请注意控制器将无法在透明区域工作

Answer 2

一个选择是向每个组件添加一个控制器：

<html>
    <body>
        <!-- I want to display 'Title: First Panel' -->
        <panel ng-controller="firstPanelController"></panel>

        <!-- I want to display 'Title: Second Panel' -->
        <panel ng-controller="secondPanelController"></panel>
    </body>
</html>

ng-controller指令创建一个新的继承范围，控制器可以在该范围上放置取代父范围属性的属性。

使用带有公共作用域的指令作为隔离作用域

2 个答案: