CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
user3201167
user3201167

Reputation:

angularjs directive: data binding not working using replaceWith()

I am new to angularjs.....I am trying to write a directive which adds some html before and after an element...html is as desired but data binding not happening ... please help

plunker link

 my precompile function is as follows



 var linkFunction = function(scope,element,attrs){

        element.removeAttr("cs-options"); 
        var html = getHTML(element);
        element.replaceWith(html);
        $compile(element.parent())(scope);

      }

Upvotes: 0

Views: 422

Answers (2)

codef0rmer
codef0rmer

Reputation: 10530

The data binding does not work because the getHTML() method not copying {{abc}} along with the element. You need to update the link method as:

  var linkFunction = function(scope,element,attrs){
    // do not miss {{abc}}
    var $parent = element.parent();
    element.removeAttr("cs-options"); 
    var html = getHTML($parent);

    // override the parent not the element otherwise 
    // there will be two instances of {{abc}}
    $parent.html(html);

    $compile($parent)(scope);        
  }

Demo: http://plnkr.co/edit/mckBVu1HfT4fp90Twvum

Upvotes: 0

shaunhusain
shaunhusain

Reputation: 19748

Here's a way simpler solution, I'm using transclude to have the contents of the element copied into the template.

app.directive('csOptions',["$compile",function($compile){
  return{
    restrict:'A',
    transclude:true,
    template:"<form><div ng-transclude></div></form>"
  }
}])

http://plnkr.co/edit/fqHr6i

Upvotes: 1

Related Questions