我只想在某些需要的地方更新我的指令内容,而不在其他地方更新。我在这里模拟了我的问题:http : //jsfiddle.net/Lvc0u55v/2945/
问题是,我有一个在两个地方应用的“编辑器”指令:
<span class="editor1" editor ></span>
<span class="editor2" editor ></span>
我想更新span class="editor1"
按钮单击的内容。
我该怎么做?
为什么不通过隔离指令的范围来使用相对Angularesque的方法,并在最大程度上避免逻辑上使用jQuery。
因此,您可以将指令定义如下:
.directive('editor', function() {
return {
scope: {
upd : '=',
editordata : '=data'
},
template: '<div>{{editordata}}</div>',
controller: function($scope, $rootScope, $element) {
$rootScope.$on('update', function(evt, data) {
if(data.upd === $scope.upd){
$scope.editordata = data.txt;
}
})
},
link: function(scope, el, attr) {}
}
})
在这里,你是路过其所需的信息,editor
指令通过其取决于scope
,即upd
(我想你是怎么想唯一标识由项目)和文本data
。
同时,您可以在公共父控制器中定义编辑器项目的列表,MyCtrl
并使用来在DOM中对其进行迭代ng-repeat
。
// MyCtrl controller
$scope.list = [
{upd: 'editor1', data: 'original data for editor1'},
{upd: 'editor1', data: 'original data for editor2'}
]
<!-- HTML -->
<div ng-repeat="item in list" upd="item.upd" data="item.data"></div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句