Add method to Angular directive?

Question

I'm trying to create a directive that would enhance an HTML element. So I managed to get the directive to run and to be associated with the element My current code is something like this:

angular.module('myModule', [])

    .directive('myDirective', function() {
        return {
            restrict: 'C',
            replace: false,
            scope: {},
            link: function(scope, element, attrs) {

            }
        }
    });

Now I would like to add new methods to the HTML element, for example I would like to do this:

// Pseudo code
myElement.reset();
myElement.reload(); // etc.

What would be the best way to add these methods to the directive?

It's not clear to me what you really want to do, but you don't put functions on the HTML element in angular. A natural place to define the functions might be in the directive controller and then expose them through the directive $scope, or maybe the controller itself - it really depends on what you want to do. — joakimbl
– joakimbl, Commented Apr 16, 2013 at 7:22
More or less the same question as mine stackoverflow.com/questions/34682739/…. I'm still looking for a satisfactory answer. If Artem's answer is the "Angular way", then the Angular way is not a very nice way. — poshest
– poshest, Commented Aug 17, 2016 at 12:23

Artem · Accepted Answer · 2014-01-07 06:34:13Z

6

Adding new methods to elements is not the Angular way. The angular way would be creating object with fields, passing it to directive and watch for field changes inside directive. Here is simple example: http://plnkr.co/edit/5v5mN69Bu18jpnoGwYqj?p=preview

edited Jan 7, 2014 at 6:34

answered Apr 16, 2013 at 7:38

Artem

7848 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lutz · Accepted Answer · 2013-04-16 07:23:28Z

3

Your example of your directive is very basic, so I can't see what do you want to achieve. At least I can say: You can define new functions as functions of the scope , e.g.

...
link: function(scope, element, attrs) {
    scope.reset = function() {
         // reset something
    }
    // ...
}

If you want to access data loaded (e.g. for use in function reload()) in the scope you should write a controller for this use. so you can inject a service as a data source. Implementing functions bound to elements directly is more the jQuery way to do not the angularjs one. In angularjs you work with scopes mainly.

Maybe you provide a more complete example at best using jsfiddle or plnkr, I think it easier to help to see your use case or your problem as a piece of working code.

answered Apr 16, 2013 at 7:23

Lutz

562 bronze badges

2 Comments

HMR Over a year ago

I don't get it; according to this answer: stackoverflow.com/a/15681173/1641941 it's bad to pollute the scope with functions that belong to your directive but I have yet to find out where to add them and how to call them. This and the other answer popped up in a google search but don't answer my question.

John Henckel Over a year ago

@HMR don't worry about polluting the scope, because you have scope: {} the directive has an isolated scope. You can add functions to the scope in either the link or the controller.

paiego · Accepted Answer · 2018-10-30 01:03:08Z

One way to add these methods to your directive is to make the directive a controller (aka a subview). The $scope param in the controller will give you bi-directional access to the HTML in the template:

For example:

.directive("myDirective", function() {

var controller = ['$scope', function teamCountCtrl ($scope)
{
    $scope.reset = function() {
       // modify $scope.obj
    };

    $scope.reload = function() {
       // modify $scope.obj
    };
}];

return {
    replace: true,
    templateUrl: 'js/directives/teamCount.html',
    scope: {
        obj: '='
    },
    controller: controller
}});

Then in the template HTML you can call reset() or reload():

<div>

<a tabindex=-1 class="btn" href="#" ng-click="reset()">
    <i class="fa fa-fw"></i>
</a>

<a tabindex=-1 class="btn" href="#" ng-click="reload()">
    <i class="fa fa-fw"></i>
</a>

Collectives™ on Stack Overflow

Add method to Angular directive?

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related