使用具有 public 作用域的指令作为独立作用域

Question

前段时间我写了一个自定义指令，现在在代码中的很多地方都在使用它（不能再更改了）。

它有一个 public 范围，直到今天都还不错。现在我想在同一个控制器范围（父范围）内使用相同的指令两次，但需要每个指令（子范围）都有自己的变量（如隔离范围）并且不要彼此不匹配。

是否可以插入此指令并显式声明使用隔离作用域，即使它最初是使用 public 作用域创建的？或者也许是一种在父控制器内限制它的方法？或者有什么其他的方法吗？

例如

// 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 指令创建一个新的继承作用域，控制器可以在其中放置取代父作用域属性的属性。

使用具有 public 作用域的指令作为独立作用域

use a directive with public scope as a isolated scope

angularjs

angularjs-directive

angularjs-scope

angularjs-controller