Question

我创建了一个指令，并在同一页面上使用了两次。但他们被置于另一个指令

<directive1>
    <select-directive/>
</directive1>

<directive1>
    <select-directive/>
</directive1>

现在更改其中一个选择的值也应该对另一个选择元素生效。

这可能吗？

修改

尝试将$ rootScope与$ broadcast和$ on一起使用。但是当从第一个选择字段中选择一个值时，第二个被设置为“空”，就像没有选择任何东西一样。从secong中选择一些值现在会产生一个空的第一个选择字段。

(function() {
'use strict';

var currencySelectionBox = function(ServiceFactory, $rootScope) {
    return {
        restrict: "E",
        replace: true,
        scope: false,
        template: '<select ng-options="o.currency_code for o in currencyList" ng-model="currencyListSelectedValue" class="form-control"></select>',
        link: function(scope, element, attrs) {
            ServiceFactory.getCurrencies().then(function(response) {
                scope.currencyList = response.data.items;
            });

            element.bind("change", function(e) {
                $rootScope.$broadcast('currencyChanged', scope.currencyListSelectedValue);
            });

            $rootScope.$on('currencyChanged', function(event, data) {
                scope.currencyListSelectedValue = data;
                console.log(scope.currencyListSelectedValue);

            });

        }
    };
};

angular
    .module('app')
    .directive('currencySelectionBox', ['ServiceFactory', '$rootScope', currencySelectionBox]);
})();

Answer 1

是的，有可能。

您可以使用$rootScope作为指令之间的通信渠道。指令很可能是孤立的范围，不能相互通信。因此，您使用$rootScope.$broadcast('eventName')或$rootScope.$emit('eventName')通知其他事件的指令。

然后你的指令会听$rootScope.$on('eventName', function(event, args){})

您可能希望在每个指令实例中设置唯一ID，然后也广播此ID，以便您可以区分事件的来源。

选择的更改应对所有其他选择元素生效，反之亦然

1 个答案: