Пользовательские директивы AngularJS - перекрестные переменные переменных контроллера

Я новичок в AngularJS и пытаюсь создать свои первые пользовательские директивы.Пользовательские директивы AngularJS - перекрестные переменные переменных контроллера

На самом деле я создал две директивы, каждый из которых использует собственный контроллер. Может быть, я ошибался, но я ожидал, что каждый директивный контроллер использует свою изолированную $ scope. Но в шаблоне «Directive One» я могу назвать переменную из «Директивы два» и наоборот.

Как я могу получить изолированную область $ для каждой директивы, чтобы шаблон каждой директивы мог использовать только собственные переменные?

index.html:

<!DOCTYPE html> 
<html ng-app="application"> 

    <head> 
    <script src="https://code.angularjs.org/1.2.28/angular.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <h1>Testing Custom Directives</h1> 
    <hr /> 
    <directive-one></directive-one> 
    <directive-two></directive-two> 
    </body> 

</html>

script.js:

var app = angular.module('application', [ ]); 

app.directive('directiveOne', function(){ 
    return { 
    restrict: 'E', 
    template: '<h3>Directive 1</h3> {{dirCtrlOne.name}} {{dirCtrlTwo.year}}', 
    controller:function(){ 
     this.name = 'John'; 
    }, 
    controllerAs: 'dirCtrlOne' 
    } 
}); 

app.directive('directiveTwo', function(){ 
    return { 
    restrict: 'E', 
    template: '<h3>Directive 2</h3> {{dirCtrlTwo.year}} {{dirCtrlOne.name}}', 
    controller:function(){ 
     this.year = 1990; 
    }, 
    controllerAs: 'dirCtrlTwo' 
    } 
});

источник

2015-04-27 Mountain

Запись scope: {} в вашей директиве, которая изолирует объем Директивы из любого родительского объема (ов)

От AngularJS documentation

в качестве имя предполагает, что изоляционная область директивы выделяет все, кроме моделей, которые вы явно добавили в область: {} хэш-объект. Это полезно при сборке повторно используемых компонентов, потому что не позволяет компоненту изменять состояние модели, за исключением моделей, которые вы явно передаете.

источник

2015-04-27 19:37:44

По умолчанию директива наследует сферу его родителей и путем добавления переменных в рамках директивы добавляет, что к родитель. Именно по этой причине обе ваши директивы имеют доступ к другим переменным. Для того, чтобы иметь области действия, изолированные, пожалуйста, попробуйте этот код:

var app = angular.module('application', [ ]); 

app.directive('directiveOne', function(){ 
    return { 
    restrict: 'E', 
    scope: true, 
    template: '<h3>Directive 1</h3> {{dirCtrlOne.name}} {{dirCtrlTwo.year}}', 
    controller:function(){ 
    this.name = 'John'; 
    }, 
    controllerAs: 'dirCtrlOne' 
} 
}); 

app.directive('directiveTwo', function(){ 
    return { 
     restrict: 'E', 
     scope: true, 
     template: '<h3>Directive 2</h3> {{dirCtrlTwo.year}} {{dirCtrlOne.name}}', 
     controller:function(){ 
     this.year = 1990; 
    }, 
    controllerAs: 'dirCtrlTwo' 
} 
});

источник

2015-04-27 19:34:32 shivas

Пользовательские директивы AngularJS - перекрестные переменные переменных контроллера

ответ

Смежные вопросы