Reputation: 185
I have a directive..i want to use a function defined inside the link function of the directive in the place where i have defined the template of my directive
app.js
angular.module('app',[])
.controller('appCtrl', function($scope){
$scope.name = "Vikram Prasad";
})
.directive('directive', function(){
return{
restrict:'A',
templateUrl:'button.html',
link:function(elems, attrs, scope){
scope.index=0;
scope.colors = ['red','blue','green','orange','brown'];
scope.color = scope.colors[scope.index];
scope.changeColor = function(){
console.log('clicked');
if(scope.index>scope.colors.length){
scope.index = 0;
}
scope.color = scope.colors[scope.index];
scope.index++;
};
}
}
});
directive template
<div class="button" ng-class="color" ng-click="changeColor()">Click Me</div>
The ng-click on the template does not responds to the click. What am i doing wrong here ?
Upvotes: 2
Views: 137
Reputation: 136134
You had mistaken in link
function parameter, scope
comes first.
link:function(elems, attrs, scope){
should be
link:function(scope, elems, attrs){
Upvotes: 2