CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
J145
J145

Reputation: 699

Common directive ng-click guidance needed

I have a directive which consists of a form text element and a continue button along with the associated controller etc. This directive is going to be used in about 5 different pages, but on each page it is used the continue button will do something different.

My question is where can/should I put the code for the continue button if it does different things for each page?

Since its a directive I cant simply pass a different function into ng-click depending on what page im on (ie, if i simply replicated the code on each page it is used I could simply change the function called on ng-click and have that function in each of the page controllers.

Hopefully Im not being too vague with my question and you can make sense of what im asking. If not just say so and ill try to explain in more detail.

I would really appreciate some guidance on this matter.

Thanks.

Upvotes: 0

Views: 281

Answers (2)

Chandermani
Chandermani

Reputation: 42669

There are two ways that you can do it. If you are creating your directive as a true component you can use isolated scope with & binding that binds to an expression. Assume your directive looks like

<div do-work on-click="save()"></div>

and the generated html

<div>
   <input ...> 
   <button ng-click="doAction()"><button>
</div>

The directive scope will be defined

scope:{
   onClick:'&'
}

In your directive controller or link function you need to implement the button doAction, which in turns evaluates the onClick action

scope.doAction=function() {
   scope.onClick({//if params are required});
}

Now you have linked the parent through the direct onClick reference. One thing to remember here is that this creates a directive with isolated scope.

In case you do not want isolated scope created you need to use

scope.$eval(attr.onClick); // this evaluates the expression on the current scope.

Hope this helps.

Upvotes: 2

Rabi
Rabi

Reputation: 2220

Ideally you should not create directives which are not re-usable.

In your case, you may do it like following -

  1. create an isolated scope in the directive
  2. add a function to be called and pass the page/ page id as parameter
  3. call functions in controller based on parameter

Directive

myApp.directive('someDirecive', function () {  
    return {
        // restrict options are EACM. we want to use it like an attribute
        restrict: 'A',
        // template : <inline template string>
        // templateUrl = path to directive template.
        // templateUrl: '',
        scope: {
            onButtonClick : '&'
        },
        controller: function ($scope, $element, $attrs, $transclude) {
	
			$scope.onButtonClick = function(pageId) {
				if (pageId == 1) {
					// do something
				}
				else if (pageId == 2) {
					// do something
				}
			}
		
        },
		
        //link: function (scope, iElement, iAttrs) {
        //}

    };
});

HTML

<div some-directive on-button-click="DoSomething(1)" />

Upvotes: 1

Related Questions