Resolving scope variables in an angular directive

Question

I'm working on creating an angular directive (element) that will apply some transformation to the text within.

Here is the directive:

module.directive('myDir', function() {
    return {
      restrict: 'E',
      link: function(scope, elem, attrs) {
        console.log(elem.text());       
      },
    };
  });

For now I've just placed a console.log in there to make sure I am seeing the expected text.

If my html is like this it works as expected:

<my-dir>Hello World!</my-dir>

However, if I use a variable from the scope such as this:

<my-dir>{{myMessage}}</my-dir>

Then that is the text I seen in the console output instead of the variables value. I think I understand why the output is this way, however I'm not sure how to get the correct value. The requirement is that the directive should be able to transform text from both examples.

Thoughts?

Ori Drori · Accepted Answer · 2015-09-10 21:32:45Z

2

Use $interpolate service to convert the string to a function, and apply the scope as parameter to get the value (fiddle):

module.directive('myDir', function($interpolate) {
    return {
      restrict: 'E',
      link: function(scope, elem, attrs) {
        console.log($interpolate(elem.text())(scope));
      },
    };
  });

answered Sep 10, 2015 at 21:32

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

4 Comments

Pankaj Parkar Over a year ago

Same as that of mine.. :)

Pankaj Parkar Over a year ago

Though I did +1 for you my friend. :) Here we are not to win OR lose..just here to share & earn knowledge..

Ori Drori Over a year ago

It goes both ways :-P

Russell Durham Over a year ago

Had to give it to you for including links to the interpolate service and a fiddle example. If I could have marked Pankaj's as well I would have. Thanks to you both.

Pankaj Parkar · Accepted Answer · 2015-09-17 19:29:38Z

2

If you really interested get the interpolated content then do use $interpolate service to evaluated the interpolated content.

Code

link: function(scope, elem, attrs) {
    console.log($interpolate(elem.text())(scope));
},

Don't forget to add $interpolate as dependency on directive function.

edited Sep 17, 2015 at 19:29

answered Sep 10, 2015 at 21:31

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Comments

RWAM · Accepted Answer · 2015-09-10 21:28:31Z

0

Have a look on $compile or http://odetocode.com/blogs/scott/archive/2014/05/07/using-compile-in-angular.aspx

This should work:

module.directive('myDir', function($compile) {
  return {
    restrict: 'E',
    link: function(scope, elem, attrs) {
      console.log($compile(elem.text())(scope));       
    },
  };
});

answered Sep 10, 2015 at 21:28

RWAM

7,0583 gold badges37 silver badges48 bronze badges

Comments

charlietfl · Accepted Answer · 2015-09-10 21:34:09Z

0

I would suggest you use an isolated scope on directive which will give you access to the value without having to get it from the dom. You will also be able to manipulate it directly in the link function as part of scope

<my-dir my-message="myMessage"></my-dir>

JS

module.directive('myDir', function() {
    return {
      restrict: 'E',
      template: '{{myMessage}}',
      scope:{
        myMessage: '=', 
      },
      link: function(scope, elem, attrs) {
        console.log(scope.myMessage);       
      },
    };
});

answered Sep 10, 2015 at 21:34

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

Resolving scope variables in an angular directive

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related