Question

我想找到一种在我的两个兄弟指令之间进行清洁沟通的方法。我想实现＆＃34; insertAtCaret＆＃34;一个指令中textarea的功能，可以从另一个指令中调用。

<text-holder ng-model='model.text' />
<text-inserter>
    <a ng-click='insert("hello")'>Hello</a>
</text-inserter>

text-holder变成了这样的东西：

<div class='my-class'>
    <h3>Enter some text:</h3>
    <textarea ng-model='ngModel'></textarea>
</div>

text-inserter需要在textarea中添加内容 - 什么是允许该通信的最干净的角度方式？我希望能够支持页面上的多个实例。我应该从共享服务中为每个人创建一个唯一的ID吗？这似乎有点不洁净。

Answer 1

你可以：

在外部DOM元素中删除你的指令。
在此元素上创建通信指令。
使用此指令的控制器作为两个指令之间通信的API。

使用两个指令中的require，to，set，text。

4.1.next-build-launcher:
  com.sonyericsson.jenkins.plugins.bfa.model.ScannerJobProperty$ScannerJobPropertyDescriptor@b299407=com.sonyericsson.jenkins.plugins.bfa.model.ScannerJobProperty@5e04bfd7
  com.chikli.hudson.plugin.naginator.NaginatorOptOutProperty$DescriptorImpl@40d04eaa=com.chikli.hudson.plugin.naginator.NaginatorOptOutProperty@16b308db
  hudson.model.ParametersDefinitionProperty$DescriptorImpl@b744c43=hudson.mod el.ParametersDefinitionProperty@440a6d81
  ...

指令：

<div text-com-directive>
<text-holder ng-model='model.text' />
<text-inserter>
    <a ng-click='insert("hello")'>Hello</a>
</text-inserter>
</div>

Answer 2

两个指令之间唯一的链是一个应该更新的变量，这两个指令也使用它。 text-inserter指令有点像选择要对文本持有者执行的方法

HTML

<text-holder ng-model='model.text'></text-holder>
    <text-inserter>
      <a ng-click='model.insert("hello")'>Hello</a>
    </text-inserter>

的script.js

var app = angular.module('testapp',[]);
app.controller('appController', function ($scope) {

  $scope.model = {text: 'sample', insert: function(a){$scope.model.text = a}};

})

app.directive('textInserter', function () {
      return {
      restrict: 'E',
      trasclude: true // important to keep the content that is defined outside of directive
    }
});

Sample

insert函数在控制器中设置，该控制器保存变量以传递给指令，这样可以帮助我们轻松理解应该应用的逻辑以及将在启动时发生的模型变量自我范围。您可以通过情境改变某些特定实例的行为获得更多好处。

指令通信 - 共享对内部HTML元素的引用

2 个答案: