请帮助修复脚本。
我只是指示:
angular.module('menus', [])
.directive("epMenu", ['$timeout', '$state',
function ($timeout, $state) {
return {
link: function (scope, element, attrs) {
scope.goTo = function(link) {
console.log('go to', link);
};
var navigationElem = angular.element("<div class='ep-menu-navigation'><li ng-click='scope.goTo('main')'>qwerty</li></div>");
angular.element('body').append(navigationElem);
},
restrict: "EACM"
}
}]);
但它不起作用。我需要按下按钮,启动功能goTo()
现在控制台出现以下错误消息:
VM436 angular.js:12520错误:[$ injector:unpr]未知提供者:$ stateProvider&lt; - $ state&lt; - epMenuDirective
答案 0 :(得分:1)
首先,您应该将ui.router
作为依赖项注入您的模块。
angular.module('menus',["ui.router"])
如果要在指令创建的链接上单击时更改状态,为指令创建控制器。
使用控制器中的$state.go
重定向。
在我的回答中,我使用了一个控制器,当点击指令链接时,它会将state
更改为menu
。
以下是实现它的代码,
(function() {
angular.module('menus')
directive('epMenu', function () {
var controller = ['$scope','$state', function ($scope,$state) {
$scope.goTo = function(link) {
$state.go(link)
};
}],
template = "<div class='ep-menu-navigation'><li ng-click='goTo('main')'>qwerty</li></div>";
return {
restrict: 'EA', //Default in 1.3+
controller: controller,
template: template
};
});
}());
答案 1 :(得分:1)
$state
是在ui.router
模块中注册的提供程序,因此您必须存在该依赖项:
angular.module('menus', ["ui.router"])
另外,如果要在link
函数中动态构建模板,则必须对其进行编译,以便angular可以对其应用其操作:
.directive("epMenu", ['$timeout', '$state', '$compile',
function ($timeout, $state, $compile) {
return {
link: function (scope, element, attrs) {
scope.goTo = function(link) {
console.log('go to', link);
};
var navigationElem = angular.element("<div class='ep-menu-navigation'><li ng-click='goTo('main')'>qwerty</li></div>");
$compile(navigationElem)(scope, function(cloned){
angular.element('body').append(cloned);
});
},
restrict: "EACM"
}
}]);
您的代码中还有其他一些错误:
scope.goTo
代替goTo
goTo
函数angular.element('body')
,而是使用$document
服务答案 2 :(得分:1)
代码中的错误是因为它找不到$state
的依赖项。您必须添加angular.module('menus', ["ui.router"])
,因为$state
已在ui-router
内注册。您还必须为ui-router
添加适当的j。您可以在链接功能中绑定click事件。
angular.module('menus', ["ui.router"]).directive("epMenu", ['$timeout', '$state',
function($timeout, $state) {
return {
link: function(scope, element, attrs) {
element.find('button').bind('click', function() {
console.log("click");
});
},
restrict: "EACM"
}
}
]);
&#13;
angular.module('menus',
["ui.router"])
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<div ng-app="menus">
<ep-menu>
this is normal text
<button>
Click Me
</button>
</ep-menu>
</div>
&#13;