在 AngularJS 的指令中分配和使用控制器的正确方法

Question

如何正确地将控制器分配给指令，以便 2 个指令可以相互通信。当我将第二个指令的 require 参数设置为第一个指令的名称时，我在控制台中收到错误：

错误：没有控制器：目录 在错误（） 在 getControllers (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:4132:19) 在 nodeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:4259:35) 在compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:3869:15) 在compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:3872:13) 在 nodeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:4252:24) 在compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:3869:15) 在compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:3872:13) 在 publicLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:3775:30) 在http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:934:25<div class="btn btn-danger" dir2="">angular.js:5601

（匿名函数）angular.js:5601

（匿名函数）angular.js:4698

nodeLinkFnangular.js:4261

compositeLinkFnangular.js:3869

compositeLinkFnangular.js:3872

nodeLinkFnangular.js:4252

compositeLinkFnangular.js:3869

compositeLinkFnangular.js:3872

publicLinkFnangular.js:3775

（匿名函数）angular.js:934

Scope.$evalangular.js:7905

Scope.$applyangular.js:7985

（匿名函数）angular.js:932

调用angular.js:2813

bootstrapangular.js:930

angularInitangular.js:906

（匿名函数）angular.js:14600

cjquery-latest.min.js:3

p.fireWithjquery-latest.min.js:3

b.extend.readyjquery-latest.min.js:3

H

这是plnkr 中的一个示例。

编辑：

我正在尝试做很多网站中都存在的事情，通过单击按钮或从列表视图到缩略图视图的链接来更改视图模板等... 我考虑过为按钮切换器制作 2 个指令，一个称为“switcher”，另一个称为“switchable-view”用于视图。这是一个带有示例代码的 plnkr。 这个想法是，当我单击“切换器”指令时，它会在可切换指令中切换模板，这将导致切换视图，我希望这足够清楚。 我想做的是这样的plnkr

提前致谢。

Answer 1

实际上，当您想在指令之间共享控制器时，您需要在一个元素上或层次结构上的某个位置（并在需要的名称前添加“^”）。

因此，您的问题的答案是：产生此错误是因为所需的指令/控制器不在 DOM 元素的同一层次或更高层次上。

我想，你想要一些容器来存储attributes 的列表，然后从指令中操作这个列表。我的建议是使用另一个指令来存储它们（就像 ngForm 一样）。因此，位于 DOM 层次结构不同叶子上的两个指令 (dir, dir2) 都需要一些包含共享数据并具有公共层次结构的指令。种类：

──── attributesDirective (in controller: this.doSomething())
                     ├ dir1 (requre: '^AttributesDirective')
                     └ dir2 (requre: '^AttributesDirective')   

但是，实际上，您可以在不添加任何指令和任何 JS 代码的情况下实现您在“EDIT”中描述的内容：添加将存储的属性 template模板文件的名称并在用户单击项目时更改此属性。 ngInclude 将获取新值并重新加载模板。

这是您使用此解决方案更改的 plunker：http://plnkr.co/edit/z7wg1TCIdmQjfT8A2rZe?p=preview