0

Is it possible to bind to the text of an element without actually dropping into the link function?

<blink>Text Here or {{ controllerText() }}</blink>

// add a namespace for custom directives
angular.module('mydirectives', []);

angular.module('mydirectives').directive('blink', function() {
   return {
      restrict: 'E',
      template: '<marquee scrollamount="100%">{{ can i do it here? }} </marquee>',
      scope: {
         // can i do it here?
      }
   };
});
Improve this question
1
  • Do you mean transclusion? Commented Feb 14, 2013 at 21:57

2 Answers 2

Reset to default
2

So this is done with transclusion which merges the content of the original element with the template. The ng-transclude tag in the template is required to get it to work.

<blink>Bring the blink back<blink>

// add a namespace for custom directives
angular.module('mydirectives', []);

angular.module('mydirectives').directive('blink', function() {
    return {
      restrict: 'E',
      transclude: true,
      template: '<marquee scrollamount="100%" ng-transclude></marquee>'
   }
});
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

You absolute can.

scope: {
    text: '='
}

This adds a text attribute to the isolate scope that is linked to the value of the text attribute from the element.

So you need to change the html slightly to:

<blink text="fromController"></blink>

And then add that fromController attribute in the enclosing controller.

Here's a (very annoying) fiddle.

Improve this answer

2 Comments

This is a perfect solution if you wanted to pass the text in as an attribute rather than as the contents of the tag.
I like this too. Not what I was after, but it wasn't long before I needed to do this too. Many thanks!