2016-05-19 33 views
4

我正在嘗試編寫一個指令,要求在角度-UI路由器狀態定義中配置的父控制器。爲什麼我的指令不需要由angular-ui-router創建的控制器?

指令「嗶」有需要:「^子控制器

‘子控制器’是用於在角-UI-路由器配置的視圖控制器。

該視圖包含使用指令「beep」的元素。

但是:只要導航到子狀態,就有一個例外說「子控制器無法找到」。

angular-ui-router中的問題?我的一些誤解?

重現:只需點擊「運行代碼片斷」,然後點擊「亞狀態」按鈕:

angular 
 
\t .module('foo', ['ui.router']) 
 

 
\t .controller('subController', function() { 
 
\t \t console.log("subController"); 
 
\t }) 
 

 
\t .config(function ($stateProvider, $urlRouterProvider) { 
 

 
\t \t $urlRouterProvider.otherwise("/root"); 
 

 
\t \t $stateProvider 
 
\t \t \t .state('root', { 
 
\t \t \t \t url: '/root', 
 
\t \t \t \t views: { 
 
\t \t \t \t \t root: { 
 
\t \t \t \t \t \t template: '<button ui-sref="root">Root State</button>' + 
 
\t \t \t \t \t \t '<button ui-sref="root.sub">Sub State</button>' + 
 
\t \t \t \t \t \t '<div ui-view="sub"></div>' 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t }) 
 

 
\t \t \t .state('root.sub', { 
 
\t \t \t \t url: '/sub', 
 
\t \t \t \t views: { 
 
\t \t \t \t \t sub: { 
 
\t \t \t \t \t \t controller: 'subController', 
 
\t \t \t \t \t \t template: '<div beep>SUB</div>' 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t }); 
 

 
\t }) 
 

 
\t .directive('beep', function() { 
 
\t \t return { 
 
\t \t \t restrict: 'A', 
 
\t \t \t require: '^subController', 
 
\t \t \t link: function (scope, element, attributes, subController) { 
 
\t \t \t \t console.log("beep: linked", subController); 
 
\t \t \t } 
 
\t \t }; 
 
\t }) 
 
;
<!DOCTYPE html> 
 
<html lang="en"> 
 
\t <head> 
 
\t \t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> 
 
\t \t <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.0/angular-ui-router.js"></script> 
 
\t \t <script src="app.js"></script> 
 
\t </head> 
 
\t <body ng-app="foo"> 
 
\t \t <div class="root-view" ui-view="root"></div> 
 
\t \t <pre id="errors" style="color: #e22; margin-top: 20px;"></pre> 
 
\t </body> 
 

 
</html>

回答

2

您無法搜索控制器,只能在同一元素或父元素中搜索指令。

如果您有該指令,則該指令的控制器將作爲鏈接函數的第4個參數傳遞。

此外控制器的指令和控制器綁定到視圖/狀態/ ng控制器是不同的概念。指令的控制器沒有範圍,它用於將API暴露給其他指令,最着名的是ngModel的控制器。

如果您需要處於指令的特定狀態/控制器中,那意味着您的設計中出現了錯誤。告訴我們你想做什麼功能性,我們可以幫助你如何以角度來設計它。

+1

謝謝!當然你是對的。 我在https://docs.angularjs.org/guide/directive中被錯誤的措辭拋棄了,例如「除非找到**指定的控制器**,否則會拋出錯誤」,「A ^前綴會使該指令在其自己的元素或其父母上尋找**控制器**。 https://docs.angularjs.org/api/ng/service/$compile上的文檔要好得多 –

+0

@StephenFriedrich是的,這是我給予某人在兩天內混合使用的第二個答案。別擔心,你並不孤單:) – Walfrat

+0

我可以'要求:'^^ uiView''?一個錯誤說uiView無法找到。爲什麼? – Shawn

0

「需要」的指令應包括父指令不是控制器。 使用子控制器的一種方法是通過在指令'beep'中包含控制器:subController

相關問題