Geek Answers Handbook

Why can't my directive require the controller created by angular -ui-router?

I am trying to write a directive that requires a parent controller that is configured in determining the state of angular -ui-router.

The beep directive requires: '^ subController

"subController" is the controller for the view configured in angular -ui-router.

This view contains an element that uses the beep directive.

However: there is an exception that says “the subcontroller cannot be found” as soon as I get to the smudge.

Error in angular -ui-router? Is there some misunderstanding on my side?

Play: just click “Run Code Snippet” and then click the “Sub-state” button:

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>
Run code
+4
2

, .

, 4- .

, //ng- - . - , API , ngModel.

/ , , - . , , angular.

+2

'require' , , . subController : subController "beep"

0

More articles:


All Articles