2016-05-19 32 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

相关问题