Блог

Главная - Вопросы по программированию - Как получить доступ к атрибутам родительской директивы внутри шаблона дочерней директивы

Как получить доступ к атрибутам родительской директивы внутри шаблона дочерней директивы

#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 и перейти к его родительскому объекту, а затем проверить значение атрибута с помощью самого jquery

4. @Chandermani Я хочу child , чтобы директива генерировала другой HTML на основе parent атрибутов директивы. В angular нет собственного способа? Я думаю, это не должно быть таким сложным… Тем не менее, я буду рад увидеть ваше предложение в качестве ответчика (я не знаю, как его реализовать).

Ответ №1:

Вероятно, это не самый чистый способ решения данной проблемы, но он работает. Вы можете перейти к родительскому элементу через jqLite и получить доступ к атрибутам:

 elem.parent().attr("type");

Обновлено и работает: http://jsfiddle.net/D6598/2 /

Ответ №2:

Если вы делаете консоль.регистрируя элемент в дочернем элементе, он возвращает дочерний элемент, у которого нет свойства type .

Но когда дочерний элемент преобразуется в родительский элемент, который имеет свойство type, он получает это значение свойства.