#javascript #angularjs #angularjs-directive #angularjs-scope
#javascript #angularjs #angularjs-директива #angularjs-scope
Вопрос:
У меня есть вложенные простые директивы:
<ep:dropdown type="modern">
<ep:dropdown:item color="red">Hello</ep:dropdown:item>
<ep:dropdown:item color="blue">World</ep:dropdown:item>
</ep:dropdown>
Определение epDropdown
директивы:
app.directive('epDropdown', function () {
return {
scope: {type: '@'},
restrict: "E",
replace: true,
transclude: true,
template: function (elem, attr) {
var template;
if (attr.type == 'modern') {
template = '<div ng-transclude></div>';
}
return template;
},
controller: function($scope) {
this.type = $scope.type;
}
};
});
И epDropdownItem
директива:
app.directive('epDropdownItem', function () {
return {
require: '^epDropdown',
restrict: "E",
replace: true,
transclude: true,
scope: { color: '@' },
link: function (scope,element,attrs,parentCtrl){
scope.type = parentCtrl.type;
},
template: function (elem, attr) {
var template = '';
console.log(attr.color);
console.log(attr.type); // undefined -> how to access `type` attr of parent
return '<div>PARENT type: {{ type }} | CHILD color: {{ color }}</div>';
},
};
});
Я могу получить доступ к type
атрибуту родительской директивы внутри template
строки. Проблема в том, что я не могу получить к нему доступ внутри самого javascript. console.log(attr.type)
ВОЗВРАТ undefined
.Как я могу получить к нему доступ? Вот демонстрация jsFiddle.
Комментарии:
1. Почему вы хотите получить к нему доступ. Значение уже доступно в области видимости, для привязки? Attr — это атрибуты, определенные для этого элемента, а не родительский
2. @Chandermani Я хочу, чтобы он обрабатывал
template
строку динамически.if (attr.type == 'modern') { return templateA; } else { return templateB; }
.3. Я полагаю, тогда вам нужно использовать объект
elem
with jquery jquery lite и перейти к его родительскому объекту, а затем проверить значение атрибута с помощью самого jquery4. @Chandermani Я хочу
child
, чтобы директива генерировала другой HTML на основеparent
атрибутов директивы. В angular нет собственного способа? Я думаю, это не должно быть таким сложным… Тем не менее, я буду рад увидеть ваше предложение в качестве ответчика (я не знаю, как его реализовать).
Ответ №1:
Вероятно, это не самый чистый способ решения данной проблемы, но он работает. Вы можете перейти к родительскому элементу через jqLite и получить доступ к атрибутам:
elem.parent().attr("type");
Обновлено и работает: http://jsfiddle.net/D6598/2 /
Ответ №2:
Если вы делаете консоль.регистрируя элемент в дочернем элементе, он возвращает дочерний элемент, у которого нет свойства type .
Но когда дочерний элемент преобразуется в родительский элемент, который имеет свойство type, он получает это значение свойства.