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

2024年1月24日 185次阅读

我正在尝试编写一个指令,该指令需要在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的控制器.

如果您需要在指令的特定状态/控制器中,这意味着您的设计中存在错误.告诉我们您想要做什么功能,我们可以帮助您如何设计角度.

点赞