1

我需要创建一个包含单独的全功能指令的复合指令。我的一个组件指令向 dom 添加了一个元素，并且该元素绑定到组件指令控制器中的一个值。当复合指令在编译函数中添加组件指令时，它似乎可以工作，但在组件指令中具有 2 路绑定的部分似乎没有被编译，只是在屏幕。我意识到这有点令人费解，所以我包含了一个帮助澄清问题的方法。

 app.directive('compositeDirective', function($compile){
  return {
    compile: compileFunction
  }
  function compileFunction(element, attrs){
    attrs.$set("component-directive", "");
    element.removeAttr("composite-directive");
    element.after("<div>Component value when added in composite directive: {{compCtrl.myValue}}</div>");
    return { post: function(scope, element){
      $compile(element)(scope);
    }};
  }
});
app.directive('componentDirective', function(){
  return {
    controller: "componentController as compCtrl",
    link: link
  };
  function link(scope, element){
    element.after("<div>Component value: {{compCtrl.myValue}}</div>");
  }
});
app.controller('componentController', function(){
  var vm = this;
  vm.myValue = "Hello";
});

http://plnkr.co/edit/alO83j9Efz62VTKDOVgc

4

1 回答 1

1

我认为链接函数的更改不会导致任何编译，除非您手动调用 $compile ，即

app.directive('componentDirective', function($compile){
  return {
    controller: "componentController as compCtrl",
    link: link
  };
  function link(scope, element){
    var elm = $compile("<div>Component value: {{compCtrl.myValue}}</div>")(scope);
    element.append(elm);
  }
});

更新 plunk：http://plnkr.co/edit/pIixQujs1y6mPMKT4zxK

您还可以使用编译功能而不是链接： http: //plnkr.co/edit/fjZMd4FIQ97oHSvetOgU

另外，请确保使用 .append() 而不是 .after()。

于 2015-08-19T18:53:40.963 回答