how realize click event on directive? - angularjs

Question

Please help fix the script.
i make simply directive:
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"
}
}]);
but it does not work. I need to when you press the button, start function goTo()
Now the console following error message:
VM436 angular.js:12520 Error: [$injector:unpr] Unknown provider: $stateProvider <- $state <- epMenuDirective
live example

Answer 1

$state is a provider that is registered in the ui.router module, so you have to lay that dependency:
angular.module('menus', ["ui.router"])
Also, if you are building the template dynamically in the link function, you have to compile it so that angular can apply its actions to it:
.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"
}
}]);
You also had some other errors in your code:
Missing the angular ui router script
Using scope.goTo instead of just goTo
Not escaping the quotes in the goTo function
Using jqLite, you cannot use angular.element('body'), instead use the $document service
Here is a working example.

Answer 2

First of all you should have ui.router injected as dependency to your module.
angular.module('menus',["ui.router"])
If you want to change the state when clicked on a link created by a directive, create a controller for the directive.
use the $state.go in the controller to redirect.
In my answer, I used a controller, which changes the state to menu when clicked on the link of directive.
Here is the code to achieve it,
(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
};
});
}());

Answer 3

The error inside your code is because it does not find dependency for $state. you have to add angular.module('menus', ["ui.router"]) because $state is registered inside ui-router.also you have to add proper js for ui-router. You can bind click event inside link function.
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"
}
}
]);
angular.module('menus',
["ui.router"])
<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>