How to invoke a directive by using element name?

Question

I have a angular directive:

app.directive('myDirective', function()
{
  return{
    restrict: 'AE',
    scope: {
        myCustomer: "&"
    },
    require: 'ngModel',
    link: function(scope, element, attr, ngModel){
        var oldVal;
        function fromUser(value){
            scope.myCustomer()(value, oldVal);
            oldVal = value;
            return value;
        }

        function toUser(value){
            return value;
        }

        ngModel.$parsers.push(fromUser);

        ngModel.$formatters.push(toUser);
    }
  }
}

At the moment I invoke this director by using attribute name and bind it to a function:

 <input type="text" my-directive="showInput" ng-model="user.name">

It works fine but what I want is to use element name, something like this:

<my-directive>

The problem is I don't know how to bind to a function as I do with the attributes.

what do you mean by "a function"? You should be able to use the directive as element — Andrew Donovan
– Andrew Donovan, Commented May 13, 2016 at 13:18
I edited my code to understand better. I use parsers and formatters to watch for data changes... And when data update, a function is executed, in this case showInput function. And I would like to write the my-directive="showInput" using DOM element — Octtavius
– Octtavius, Commented May 13, 2016 at 13:21

Louie Almeda · Accepted Answer · 2016-05-13 13:20:45Z

4

You will need to set 'restrict' to 'E' in your directive definition something like:

        bindToController: true,
        controller: 'YourController',
        controllerAs: 'vm',
        restrict: 'E', //<----this is what you want
        templateUrl: 'template.html'

answered May 13, 2016 at 13:20

Louie Almeda

5,67035 silver badges41 bronze badges

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

1 Comment

Octtavius Over a year ago

And how to invoke this directive in html using elements and not attributes. Now I have my-directive="show input" but would like to have something like this <my-directive> with a function

sumair · Accepted Answer · 2016-05-13 13:27:35Z

3

You have to pass restrict: 'E' in directive options

angular.module("image-management")
    .directive('myDirective', ($modal) => {

        return {
            restrict: 'E',
            scope:{
              showInput: '&'  
            },
            template: '',
            link: function(){}
})   

    <my-directive showInput="showInput" ></my-directive>

edited May 13, 2016 at 13:27

answered May 13, 2016 at 13:21

sumair

3863 silver badges8 bronze badges

2 Comments

Octtavius Over a year ago

And how to invoke this directive in html using elements and not attributes. Now I have my-directive="show input" but would like to have something like this <my-directive> with a function

sumair Over a year ago

I have updated my answer please check how to invoke this directive in html

Andrew Donovan · Accepted Answer · 2016-05-13 13:27:27Z

1

<my-directive some-function="someFunction"></my-directive>

Then in your directive link function, it is accesible through attr

link: function(scope, element, attr, ngModel){
    // Your logic...
    attr.someFunction();
}

answered May 13, 2016 at 13:27

Andrew Donovan

5522 silver badges14 bronze badges

Comments

Moshe Yakov · Accepted Answer · 2016-05-13 13:51:30Z

As @sumair answered, you can do:

<my-directive showInput="showInput" ></my-directive>

But, if you really want to use only

<my-directive>

AND your directive does not require to have an isolated scope, you can just leave the scope property of the directive definition and reference your showInput function directly from inherited scope like so:

app.directive('myDirective', function()
{
  return{
    restrict: 'AE',
    /*scope: { ////// remove this part //////
        myCustomer: "&"
    },*/
    require: 'ngModel',
    link: function(scope, element, attr, ngModel){
        var oldVal;
        function fromUser(value){
            scope.showInput()(value, oldVal);
            oldVal = value;
            return value;
        }

        function toUser(value){
            return value;
        }

        ngModel.$parsers.push(fromUser);

        ngModel.$formatters.push(toUser);
    }
  }
}

Collectives™ on Stack Overflow

How to invoke a directive by using element name?

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related