javascript - 在 AngularJS 中的两个指令之间共享数据

Question

我有以下代码:

<div id='parent'>
   <div id='child1'>
      <my-select></my-select>
   </div>
   <div id='child2'>
      <my-input></my-input>
   </div>
</div>

我还有两个指令从数据工厂获取一些数据。我需要这两个指令相互通信，这样当选择框中的值更改时，输入也会相应更改。

这是我的两个指令:

.directive("mySelect", function ($compile) {
    return {
        restrict: 'E',
        scope:'=',
        template: " <select id='mapselectdropdown'>\
                        <option value=map1>map1</option> \
                        <option value=map2>map2</option> \
                    </select>'",
        link: function (scope, element, attrs) {
            scope.selectValue = //dont konw how to get the value of the select
        }
    };
})
.directive("myInput", function($compile) {
    return {
        restrict: 'E',
        controller: ['$scope', 'dataService', function ($scope, dataService) {
            dataService.getLocalData().then(function (data) {
                $scope.masterData = data.input;
            });
        }],
        template: "<input id='someInput'></input>",
        link: function (scope, element, attrs) {
            //here I need to get the select value and assign it to the input 
        }
    };
})

这实际上会执行 onchange() 函数，您可以将其添加到选择上。有任何想法吗？

Answer 1

您可以使用 $rootScope 广播其他 Controller 监听的消息:

// Broadcast with
$rootScope.$broadcast('inputChange', 'new value');

// Subscribe with
$rootScope.$on('inputChange', function(newValue) { /* do something */ });

Read Angular docs here