Michael Rosales
Michael Rosales

Reputation: 219

angularjs directive - get element bound text content

How do you get the value of the binding based on an angular js directive restrict: 'A'?

<span directiverestrict> {{binding}} </span>

I tried using elem[0].innerText but it returns the exact binding '{{binding}}' not the value of the binding

.directive('directiverestrict',function() {
    return {
        restrict:'A',
        link: function(scope, elem, attr) {
            // I want to get the value of the binding enclosed in the elements directive without ngModels
            console.log(elem[0].textContent) //----> returns '{{binding}}'
        }
    };
});

Upvotes: 5

Views: 6305

Answers (4)

KennethDale1
KennethDale1

Reputation: 103

Try ng-transclude. Be sure to set transclude: true on the directive as well. I was under the impression this was only needed to render the text on the page. I was wrong. This was needed for me to be able to get the value into my link function as well.

Upvotes: 0

Phil
Phil

Reputation: 164770

You can use the $interpolate service, eg

.directive('logContent', function($log, $interpolate) {
  return {
    restrict: 'A',
    link: function postLink(scope, element) {
      $log.debug($interpolate(element.text())(scope));
    }
  };
});

Plunker

Upvotes: 6

Chandermani
Chandermani

Reputation: 42669

During the link phase the inner bindings are not evaluated, the easiest hack here would be to use $timeout service to delay evaluation of inner content to next digest cycle, such as

$timeout(function() {
   console.log(elem[0].textContent);
},0);

Upvotes: 2

Arepalli Praveenkumar
Arepalli Praveenkumar

Reputation: 1306

 <span directiverestrict bind-value="binding"> {{binding}} </span>

SCRIPT

directive("directiverestrict", function () {
   return {
           restrict : "A",
           scope : {
                      value : '=bindValue'
                   },
           link : function (scope,ele,attr) {
                alert(scope.value); 
              }
      }
});

Upvotes: 2

Related Questions