如何让一个指令修改另一个指令的内容？答案

【问题标题】：how to make a directive modify the content of another directive?如何让一个指令修改另一个指令的内容？
【发布时间】：2013-06-04 22:09:07
【问题描述】：

我有一组需要在块中修改的 dom 元素。在以下示例中，“block”指令将在其中添加一个编辑链接。

<div block>
     <div editable="text1">this is editable</div>
     <div editable="text2">this is another editable</div>
</div>

我希望编辑链接填充另一个指令（称为“面板”），每个块内的每个可编辑元素都有一个输入字段。当然，输入字段必须绑定到上述 dom 元素。这些块可能被动态放置在 ng-switch 和/或 ng-repeat 内部，因此我需要考虑不同的范围级别。

具体问题是如何让一个指令修改另一个指令的内容？我只找到了如何使两个指令在附加到同一个元素时进行通信的示例。

目前我正在尝试在“块”指令的链接函数中使用 jQuery 来获取可编辑元素的列表并使用控制器范围属性将其显示在“面板”中，但我不能t 使其适用于 ng-repeat/ng-switch。

如果可能的话，非常感谢关于如何在 AngularJS 中解决这个问题的一般建议！

谢谢

【问题讨论】：

当然，问题（至少是具体的问题）仅与如何使输入字段出现有关。可编辑内容由模型管理，并且已经绑定到可编辑指令。我只需要创建字段即可在面板中进行编辑。
我很好奇 block/panel 指令具体应该做什么。它有数据或属性吗？如果它只有显示，那么为什么不只有一个“块”css 类呢？如果你举一个例子来说明你正在尝试做什么或者你已经走了多远，我们可能会回答得更好，即使它正在打破;请使用 jsfiddle 或 plunker 之类的并更新您的问题。
面板需要显示块指令中每个可编辑元素的输入字段。但是我已经解决了阅读此问题great answer

标签： javascript angularjs

【解决方案1】：

我之前也有同样的问题并且有Fiddle example，用于从指令中调用指令。也许对你有帮助。

HTML

<div ng-controller="MyCtrl">
  <div directive-foo></div>
</div>

var app = angular.module('myApp',[]);

app.directive('directiveFoo', function() {
return {
    template: '<div directive-bar="123">bar</div>',
    replace: true,
    controller: function() {
        console.log('in foo ctrl');
        this.isFooAlive = function() {
            return 'Foo is alive and well';
        }
    }
  }
});
app.directive('directiveBar', function() {
  return {
    controller: function() {
        console.log('in bar ctrl');
    },
    require: 'directiveFoo',
    link: function(scope, element, attrs, fooCtrl) {
        console.log(fooCtrl.isFooAlive());
    }
  }
});

function MyCtrl($scope) {
}

【讨论】：

这些是嵌套指令，我需要在两个完全独立的指令之间进行通信。

【解决方案2】：

我正在使用控制器范围数组来保存面板中正在编辑的字段的数据，问题是我试图使用scope.myarray = [] 清空数组，它正在子范围中创建一个新数组.

【讨论】：