Vikram Prasad
Vikram Prasad

Reputation: 185

Unable to call ng-click on function inside the link function

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

Answers (1)

Pankaj Parkar
Pankaj Parkar

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

Related Questions