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

Question

如何正確地將控制器分配給指令，以便2條指令可以相互通信。當我設置了需要第二個指令的參數到第一指令的名字我在控制檯中的錯誤：

Error: No controller: dir at Error() at getControllers (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:4132:19) at nodeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:4259:35) at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:3869:15) at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:3872:13) at nodeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:4252:24) at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:3869:15) at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:3872:13) at publicLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:3775:30) at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js:934:25 <div class="btn btn-danger" dir2=""> angular.js:5601

(anonymous function)angular.js:5601

(anonymous function)angular.js:4698

nodeLinkFnangular.js:4261

compositeLinkFnangular.js:3869

compositeLinkFnangular.js:3872

nodeLinkFnangular.js:4252

compositeLinkFnangular.js:3869

compositeLinkFnangular.js:3872

publicLinkFnangular.js:3775

(anonymous function)angular.js:934

Scope.$evalangular.js:7905

Scope.$applyangular.js:7985

(anonymous function)angular.js:932

invokeangular.js:2813

bootstrapangular.js:930

angularInitangular.js:906

(anonymous function)angular.js:14600

cjquery-latest.min.js:3

p.fireWithjquery-latest.min.js:3

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

H

下面是plnkr一個例子。

編輯：

我試圖做一些事情，出現在很多網站，通過點擊按鈕或鏈接從列表視圖縮略圖視圖改變視圖模板等... 我想關於爲按鈕切換器製作2個指令稱爲「切換器」，另一個稱爲用於視圖的「可切換視圖」。這是一個帶有示例代碼的plnkr。 這個想法是當我點擊「切換器」指令時，它切換可切換指令中的模板，這將導致切換視圖，我希望這已經足夠清晰。 我想要做的是這樣的事情plnkr

在此先感謝。

Answer 1

實際上，當您想要在指令之間共享控制器時，您需要在一個元素上或某個層次上的某個位置（並在需要的名稱前添加'^'）。

所以你的問題的答案是：這個錯誤會產生，因爲所需的指令/控制器不在DOM元素層次結構的相同或較高級別。

我想，你想有一個容器來存儲清單attributes，然後從指令操縱這個列表。我的建議是有另一個指令來存儲它們（如ngForm）。因此，位於DOM層次結構不同頁面上的兩個directives（dir，dir2）需要一些包含共享數據的指令，並具有共同的層次結構。種：

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

但實際上，你可以實現你的「編輯」所描述的內容，不添加任何指令，以及JS代碼：添加屬性template將存儲模板文件的名稱和用戶點擊項目時更改此屬性。 ngInclude將提取新的值並重新加載模板。

這是你改變plunker該解決方案：http://plnkr.co/edit/z7wg1TCIdmQjfT8A2rZe?p=preview