#angularjs #angularjs-scope #isolate-scope
#angularjs #angularjs-область #изолировать область
Вопрос:
Я думал, что освоил изолированные области с пользовательскими директивами, затем столкнулся с этой проблемой, с которой я боролся уже 3 часа:
Как только изолированная область будет создана для директивы, я подумал, что вы можете установить любые данные области (в данном случае greeting ) в функции controller или link . Но ссылка {{greeting}} в HTML не работает, даже если greeting она отображается в области видимости при проверке через консоль?
Я думал, что новая изолированная область будет назначена директиве myDir , и все, что определено в этой области, будет доступно в HTML-содержимом <my-dir> . Очевидно, у меня есть пробел в понимании.
Какие-нибудь идеи, пожалуйста?
Plunker: здесь
HTML:
<my-dir>
Greeting: {{greeting}}
</my-dir>
JS:
var app = angular.module('myApp', []);
app.directive('myDir', function() {
return {
restrict: 'EA',
scope: {},
controller: ['$scope', function ($scope) {
$scope.greeting = 'Hello';
//this.greeting = 'Hello';
}],
link: function(scope, element, attrs){
//scope.greeting = 'Hello';
}
};
})
Ответ №1:
заменить scope: {} на
scope: false,
это невозможно, текущий dom принадлежит родительскому, поэтому он будет учитывать только родительскую область, изолированная область directice directice работать не будет.
Комментарии:
1. Да, это сработало бы, но я хочу изолировать область, а не наследовать / совместно использовать родительскую область, которая, как я полагаю, в данном случае является корневой.
2. ах, так потому что DOM уже отображен в область видимости для этой части DOM, не может быть изменен, верно. Итак, возможно, я мог бы использовать transcendent в объекте определения для клонирования и повторной вставки содержимого, но с новым содержимым, ссылающимся на новую область?
3. Извините, мой последний комментарий был не очень хорошо написан, и по какой-то причине он не позволяет мне редактировать. Я хотел спросить, может ли использование transclude быть решением?
4. transclude здесь не подходит, поскольку transclude работает внутри директивы, а не снаружи.
Ответ №2:
Обратитесь к документам здесь — Создание директивы, которая переносит другие элементы:
этот пример — то, что вам может понадобиться.
В вашем случае вы также можете просто использовать ng-transclude, переместите приветствие {{приветствие}} в шаблон, который вы определяете в определениях директивы my-dir.
Определение директивы в JS
app.directive('myDir', function() {
return {
restrict: 'EA',
scope: {},
controller: function ($scope) {
$scope.greeting = 'Hello';
},
template: 'Greeting: {{greeting}}',
link: function(scope, element, attrs){
//scope.greeting = 'Hello';
}
};
})
HTML
<my-dir></my-dir>
вам просто не нужно трогать функцию ссылки или делать что-либо из коробки.
Рабочий plunkr:https://plnkr.co/edit/08tFyy?p=preview
Ответ №3:
Похоже, это работает. Кто-нибудь видит какие-либо недостатки?
Итак, в link функции передайте transclude параметр, затем установите scope для преобразованного элемента, таким образом:
app.directive('myDir', function() {
return {
restrict: 'EA',
scope: {},
controller: ['$scope', function ($scope) {
$scope.greeting = 'Hello';
}],
link: function(scope, element, attrs, ctrl, transclude){
transclude(scope, function(clone) {
element.append(clone);
});
},
transclude: true
};
})