использовать директиву с публичной областью действия как изолированную область - PullRequest
Новая
       23

использовать директиву с публичной областью действия как изолированную область

0 голосов
/ 27 ноября 2018

Некоторое время назад я написал специальную директиву, и теперь она используется во многих местах кода (больше невозможно ее изменить).

Она имеет публичную область видимости, и до сегодняшнего дня это было нормально.Теперь я хочу использовать одну и ту же директиву дважды внутри одной и той же области контроллера (родительской области), но мне нужно, чтобы каждая директива (дочерние области) имела свои собственные переменные (например, изолированную область) и не соответствовала друг другу.

Можно ли вставить эту директиву и объявить явно об использовании изолированной области видимости, даже если она сначала создается с общедоступной областью действия?Или, может быть, способ ограничить это внутри родительского контроллера?Или есть какой-нибудь другой способ, как это сделать?

ex. 

// 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>

Ответы [ 2 ]

0 голосов
/ 28 ноября 2018

Один из вариантов - добавить контроллер для каждого компонента: 

<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 создает новую унаследованную область, в которую контроллер может помещать свойства, которые заменяют свойства родительской области.

0 голосов
/ 27 ноября 2018

Лучше всего использовать, например, изолированную область. 

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>

Примите во внимание, что контроллер не будет работать в области transclude

...