我有以下代码:
<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()函数,可以在选择中添加。有任何想法吗?
答案 0 :(得分:1)
您可以使用$rootScope
广播其他控制器侦听的消息:
// Broadcast with
$rootScope.$broadcast('inputChange', 'new value');
// Subscribe with
$rootScope.$on('inputChange', function(newValue) { /* do something */ });
答案 1 :(得分:0)
也许可以转换指令来访问定义共享变量的外部作用域的属性吗?
这个转换选项究竟做了什么? transclude使得带有此选项的指令的内容可以访问指令之外的范围而不是内部。
答案 2 :(得分:0)
经过大量研究后,这是有效的......
我添加了以下内容:
.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" >