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

Posted 2023-03-05

【中文标题】在 AngularJS 中的两个指令之间共享数据

【英文标题】：Sharing Data between two Directives in AngularJS

【发布时间】：2015-04-12 01:30:30

【问题描述】：

我有以下代码：

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

我还有两个指令可以从数据工厂获取一些数据。 I need the two directives to talk to each other such that when a value in select box is changed the input in changes accordingly.

这是我的两个指令：

.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() 函数。有任何想法吗？

【参考方案1】：

您可以使用$rootScope 广播另一个控制器监听的消息：

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

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

Read Angular docs here

【讨论】：

以这种方式使用 rootScope 被认为是不好的做法。您实际上可以使用 my-select 作为父指令，并且（可选）在 my-input 指令中需要它。您的选择状态只是父指令中的控制器变量

【参考方案2】：

也许嵌入指令以访问您定义共享变量的外部范围的属性？

这个 transclude 选项到底有什么作用？ transclude 使带有此选项的指令的内容可以访问指令外部而不是内部的范围。

->https://docs.angularjs.org/guide/directive

【参考方案3】：

经过大量研究，这是有效的……

我添加了以下内容：

.directive('onChange', function()     
        return 
            restrict: 'A',
            scope:'onChange':'=' ,
            link: function(scope, elm, attrs)             
                scope.$watch('onChange', function(nVal)  elm.val(nVal); );            
                elm.bind('blur', function() 
                    var currentValue = elm.val();                
                    if( scope.onChange !== currentValue ) 
                        scope.$apply(function() 
                            scope.onChange = currentValue;
                        );
                    
                );
            
        ;        
    )

然后在我添加的元素的链接功能上：

link: function (scope, elm, attrs) 
    scope.$watch('onChange', function (nVal) 
       elm.val(nVal);
    );

最后添加值将在范围内设置的属性：

<select name="map-select2" on-change="mapId" >