将属性从一个指令转移到另一个答案

【问题标题】：Transfer attributes from one directive to another将属性从一个指令转移到另一个
【发布时间】：2015-08-04 07:50:58
【问题描述】：

我有指令 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,
                    }
                };
            }
        ]
    };
);

【问题讨论】：

我真的不明白你的问题。如果您使用<dropdown foo="bar">，您可以简单地将您的数据通过例如您的指令传递到您的范围内。 data: '=foo'
foo 需要放在dropdown 指令的模板中
啊，我明白了，所以您想将数据从控制器传递到指令和另一个指令？
是的，这听起来很对 :) 但我希望传输逻辑有点通用，这样如果有一天我重命名或向列表中添加指令，我就不得不改变它

标签： angularjs kendo-ui angular-directive kendo-dropdown

【解决方案1】：

您可以像这样将控制器的$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>

【讨论】：

感谢您的回答。但看起来我没有正确解释这个问题。它不应该只是传递值，而是传递属性和值，以便模板中的标记触发foo 指令

【解决方案2】：

设法弄明白了。灵感来自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,
                    }
                };
            }
        ]
    };
);

【讨论】：