2

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 ?

1
  • how you are using this directive.? Commented Dec 15, 2016 at 10:47

1 Answer 1

2

You had mistaken in link function parameter, scope comes first.

link:function(elems, attrs, scope){

should be

link:function(scope, elems, attrs){
Sign up to request clarification or add additional context in comments.

4 Comments

thanks sir.. whats the concept behind this hierarchy sir ?
@VikramPrasad Please don't call sir, what do you mean by concept behind this hierarchy?
What was happening when i wrote scope as the last attribute?
@VikramPrasad this is how they are intended to use, its a function gets treated as postLink function at compilation time, take a look at docs for more info

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.