CODEWITHSUNDEEP
angularjs
Burke Holland
Burke Holland

Reputation: 2337

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

Upvotes: 0

Views: 1009

Answers (2)

satchmorun
satchmorun

Reputation: 12477

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.

Upvotes: 2

Burke Holland
Burke Holland

Reputation: 2337

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

Upvotes: 2

Related Questions