AngularJs指令更新

DurGesh kuMar RAO 发表于 Dev

DurGesh kuMar RAO

我只想在某些需要的地方更新我的指令内容，而不在其他地方更新。我在这里模拟了我的问题：http : //jsfiddle.net/Lvc0u55v/2945/

问题是，我有一个在两个地方应用的“编辑器”指令：

<span class="editor1" editor ></span>
<span class="editor2" editor ></span>

我想更新span class="editor1"按钮单击的内容。

我该怎么做？

艾哈迈德·巴克塔什·哈耶里（Ahmad Baktash Hayeri）

为什么不通过隔离指令的范围来使用相对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>