Add method to Angular directive?

angularjs directive
angularjs directive scope
angular 6 directive example
angularjs directive require
custom directives in angular 2
angular directive vs component
angularjs link
function in angularjs

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?

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

Directives, The CSS selector that identifies this directive in a template and triggers instantiation of the directive To listen to global events, add the target to the event name. 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.

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.

Attribute directives, The class interacts with the view through an API of properties and methods. The example template uses two built-in structural directives to add application  To summarize, Angular found the appHighlight attribute on the host <p> element. It created an instance of the HighlightDirective class and injected a reference to the <p> element into the directive's constructor which sets the <p> element's background style to yellow.

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>

Directive, The application runs inside the <div>. The ng-controller="myCtrl" attribute is an AngularJS directive. It defines a controller. The myCtrl function is a JavaScript  Angular directives are used to extend the power of the HTML by giving it new syntax. Each directive has a name — either one from the Angular predefined like ng-repeat, or a custom one which can

Introduction to components and templates, A continuation of an in-depth look at AngularJS directives, now looking at the example of the movie directive and add more properties to the scope method so  Angular only allows directives to apply on CSS selectors that do not cross element boundaries. For the following template HTML, a directive with an input[type=text] selector, would be instantiated only on the <input type="text"> element.

AngularJS Custom Directives, Cláudio introduces Angular directives, arguably the most important bit of a directive is a function that executes whenever the Angular compiler But the structural Angular directives are much less DOM friendly, as they add  AngularJS comes with a set of these directives built-in, like ngBind, ngModel, and ngClass . Much like you create controllers and services, you can create your own directives for AngularJS to use. When AngularJS bootstraps your application, the HTML compiler traverses the DOM matching directives against the DOM elements.

Angular Controllers, The compile function allows the directive to manipulate the DOM before it is compiled and linked thereby allowing it to add/remove/change directives, as well as,  The directive can be used in your Angular templates by attahing it to elements and will add a CSS class called myClass. <p applyCSSClass > Angular 9 Example Directive with Renderer2 </p> We apply the directive to DOM elements in the template using the selector specified in the directive which is applyCSSClass .

Comments
  • 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.
  • 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.
  • 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.
  • @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.