Прехвърляне на атрибути от една директива в друга

Имам директива 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