angularjs how to bind data in the link function

Question

I have a directive like this.

app.directive('updateinfo', function() {
    function link(scope, element, attrs) {
      function update(){
         var str = '<input type="text" ng-model="scope.log1" />';
         element.html(str);    
      }
      update();
    }
    return {
      link: link
    };
});

The directive shows a text input box, but it does not show the scope.log1value and the changes made in the textbox are not reflected in the scope variable. I want to use the link function because I want to access other scope variables. Is there a way to use link function and still bind data to scope variable.

I appreciate any help.

You need to use $compile if you want to directly modify the DOM. — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Apr 24, 2015 at 11:21

Deblaton Jean-Philippe · Accepted Answer · 2015-04-24 12:04:56Z

2

First, you must not write scope or $scope into the DOM.
Secondly, you need to compile your content

app.directive('updateinfo', function($compile) {
     function link(scope, element, attrs) {
          var str = '<input type="text" ng-model="log1" />';
          element.html(str);   
          $compile(element.contents())(scope);
     }
     return {
          link: link
     };
});

edited Apr 24, 2015 at 12:04

answered Apr 24, 2015 at 12:00

Deblaton Jean-Philippe

11.4k4 gold badges53 silver badges68 bronze badges

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

Comments

dev · Accepted Answer · 2015-04-24 12:41:40Z

0

This works for me

.directive('updateinfo',['$compile', function($compile) {
    function link(scope, element, attrs) {
      function update(){
         var str = '<input type="text" ng-model="log1" />';
         element.html(str);    
      }
      update();
      element.replaceWith($compile(element.html())(scope));
    }
    return {
      link: link

    };
}]);

answered Apr 24, 2015 at 12:41

dev

3132 silver badges9 bronze badges

Collectives™ on Stack Overflow

angularjs how to bind data in the link function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related