Question

我正在尝试编写一个指令，该指令需要在angular-ui-router状态定义中配置的父控制器。

指令＆＃34; beep＆＃34;需要：＆＃39; ^ subController

＆＃34;子控制器＆＃34;是在angular-ui-router中配置的视图的控制器。

该视图包含一个使用指令＆＃34; beep＆＃34;。

的元素

但是：有一个例外，说'＆34;无法找到子控制器＆＃34;一旦我导航到子状态。

angular-ui-router中的错误？我身边有些误会？

要重现：只需点击＆＃34;运行代码段＆＃34;然后点击＆＃34;子状态＆＃34;按钮：

＆＃13;

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);
			}
		};
	})
;

＆＃13;

<!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>

＆＃13;

Answer 1

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

当你有这个指令时，该指令的控制器将作为链接函数的第4个参数传递。

此外，指令和控制器绑定到view / state / ng-controller的控制器是不同的概念。指令的控制器没有作用域，它用于向其他指令公开API，最常见的是ngModel的控制器。

如果你需要在指令的特定状态/控制器中，这意味着你的设计有问题。告诉我们您想要做什么功能，我们可以帮助您如何设计角度。

Answer 2

指令中的

'require'是包含父指令而不是控制器。使用subController的一种方法是在指令'beep'

中包含controller：subController

为什么我的指令不需要angular-ui-router创建的控制器？

2 个答案: