我正在尝试编写一个指令,该指令需要在angular-ui-router状态定义中配置的父控制器.
指令“beep”需要:’^ subController
“subController”是在angular-ui-router中配置的视图的控制器.
该视图包含一个使用指令“beep”的元素.
但是:一旦我导航到子状态,就会出现“无法找到子控制器”的异常.
angular-ui-router中的错误?我身边有些误会吗?
要重现:只需单击“运行代码段”,然后单击“子状态”按钮:
angular
.module('foo', ['ui.router'])
.controller('subController', function () {
console.log("subController");
})
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/root");
$stateProvider
.state('root', {
url: '/root',
views: {
root: {
template: '<button ui-sref="root">Root State</button>' +
'<button ui-sref="root.sub">Sub State</button>' +
'<div ui-view="sub"></div>'
}
}
})
.state('root.sub', {
url: '/sub',
views: {
sub: {
controller: 'subController',
template: '<div beep>SUB</div>'
}
}
});
})
.directive('beep', function () {
return {
restrict: 'A',
require: '^subController',
link: function (scope, element, attributes, subController) {
console.log("beep: linked", subController);
}
};
})
;
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.0/angular-ui-router.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="foo">
<div class="root-view" ui-view="root"></div>
<pre id="errors" style="color: #e22; margin-top: 20px;"></pre>
</body>
</html>
最佳答案 您无法搜索控制器,只能在同一元素或父元素中搜索指令.
当你有这个指令时,该指令的控制器将作为链接函数的第4个参数传递.
此外,指令和控制器绑定到视图/状态/ ng-controller的控制器是不同的概念.指令的控制器没有作用域,它用于向其他指令公开API,最常见的是ngModel的控制器.
如果您需要在指令的特定状态/控制器中,这意味着您的设计中存在错误.告诉我们您想要做什么功能,我们可以帮助您如何设计角度.