Question

我是angularjs的新手.....我正在尝试编写一个指令，在一个元素之前和之后添加一些html ... html是所希望的但数据绑定没有发生...请帮助

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

      }

Answer 1

这是一种更简单的解决方案，我使用transclude将元素的内容复制到模板中。

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

http://plnkr.co/edit/fqHr6i

Answer 2

数据绑定不起作用，因为getHTML()方法不会复制{{abc}}元素。您需要将link方法更新为：

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

演示：http://plnkr.co/edit/mckBVu1HfT4fp90Twvum

angularjs指令：数据绑定无法使用replaceWith（）

2 个答案: