Binding To Element Text In AngularJS

Question

Binding To Element Text In AngularJS

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?
      }
   };
});

angularjs

Answer 1

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>'
   }
});

Answer 2

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.