Перенос атрибутов из одной директивы в другую

У меня есть директива foo, которую я хочу использовать в другой директиве dropdown. Проблема в том, что директива dropdown использует еще одну директиву под названием kendo-drop-down-list в шаблоне.

Я хочу иметь возможность писать

<dropdown foo>

И результат должен быть

<select data-kendo-drop-down-list options='dropdownOptions' data-ng-model='selected' foo="bar"></select>

Проблема в том, что foo является необязательным, а это означает, что директива будет использоваться как <dropdown>, так и <dropdown foo="bar">.

Как передать атрибуты? Или я что-то не так делаю, так как столкнулся с этой проблемой?

Директива

app.directive('dropdown', function() {
    return {
        restrict: "AE",
        scope: {
            selected: "=ngModel",
        },
        template: "<select data-kendo-drop-down-list data-k-options='dropdownOptions' data-ng-model='selected'></select>",
        controller: [
            '$scope', function($scope) {                
                $scope.dropdownOptions = {
                    dataSource: {
                        type: "odata-v4",
                        transport: {
                            read: {
                                url: "odata/Products",
                                dataType: "json",
                            }
                        },
                        serverFiltering: true,
                    }
                };
            }
        ]
    };
);

angularjs angular-directive kendo-ui kendo-dropdown
person Snæbjørn    schedule 04.08.2015    source источник
comment
Я не очень понимаю вашу проблему. Если вы используете <dropdown foo="bar">, вы можете просто передать свои данные в свою директиву в свою область действия, например. data: '=foo'   -  person DonJuwe    schedule 04.08.2015
comment
foo нужно поставить в шаблон директивы dropdown   -  person Snæbjørn    schedule 04.08.2015
comment
ах, я вижу, вы хотите передать данные из вашего контроллера в директиву и в другую директиву?   -  person DonJuwe    schedule 04.08.2015
comment
Да, это звучит правильно :) Но я хочу, чтобы логика передачи была несколько общей, чтобы я был вынужден изменить ее, если когда-нибудь переименую или добавлю директиву в список.   -  person Snæbjørn    schedule 04.08.2015

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете передать переменную $scope контроллера из directiveA в directiveB следующим образом:

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

myApp.directive('directiveA', function() {
    return {
        restrict: 'E',
        template: '<directive-b foo="data"></directive-b>',
        scope: {
            data: '='
        }
    }
});

myApp.directive('directiveB', function() {
    return {
        restrict: 'E',
        template: '{{data}} I am Directive B!',
        scope: {
            data: '=foo'
        }
    }
});

myApp.controller('MyCtrl', function($scope) {
    $scope.foo = 'Hi there!';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
    <directive-a data="foo"></directive-a>
</div>

person DonJuwe    schedule 04.08.2015
comment
Спасибо за ответ. Но, похоже, я не правильно объяснил проблему. Он должен передавать не только значение, но и атрибут, и значение, чтобы тег в шаблоне запускал директиву foo - person Snæbjørn; 04.08.2015

arrow_upward
0
arrow_downward

Удалось разобраться. Вдохновленный этим https://stackoverflow.com/a/27261632/1220627

app.directive('dropdown', function() {
    return {
        restrict: "AE",
        scope: {
            selected: "=ngModel",
        },
        template: function(element, attrs) {
            var templateHtml = "<select data-kendo-drop-down-list data-k-options='dropdownOptions' data-ng-model='selected'></select>";
            var templateElement = angular.element(templateHtml);

            _.pairs(attrs.$attr).forEach(function (pair) {
                var attributeName = pair[0];
                var attributeNameActual = pair[1];
                // ignore attribute(s) from scope
                if (attributeName === "ngModel")
                    return;

                var attributeValue = attrs[attributeName];
                templateElement.attr(attributeNameActual, attributeValue);
            });

            return templateElement;
        },
        controller: [
            '$scope', function($scope) {                
                $scope.dropdownOptions = {
                    dataSource: {
                        type: "odata-v4",
                        transport: {
                            read: {
                                url: "odata/Products",
                                dataType: "json",
                            }
                        },
                        serverFiltering: true,
                    }
                };
            }
        ]
    };
);
person Snæbjørn    schedule 04.08.2015