Angular 复合（超级）指令不允许在组件（子）指令上进行 2 种方式绑定

Question

我需要创建一个复合指令，其中包含单独的全功能指令。我的一个组件指令向 dom 添加了一个元素，该元素绑定到组件指令控制器中的一个值。当复合指令在编译函数中添加组件指令时，它似乎可以工作，但是组件指令中具有 2 种方式绑定的部分似乎没有被编译，只是呈现 {{ctrl.value}} 字符串屏幕上。我意识到这有点令人费解，所以我提供了一个 plunk 来帮助澄清这个问题。

 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

Answer 1

我认为 link 函数的更改不会导致任何编译发生，除非您手动调用 $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);
  }
});

更新的插件：http://plnkr.co/edit/pIixQujs1y6mPMKT4zxK

您也可以使用编译函数代替link：http://plnkr.co/edit/fjZMd4FIQ97oHSvetOgU

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

Angular 复合（超级）指令不允许在组件（子）指令上进行 2 种方式绑定

Angular composite (super) directive not allowing 2 way binding on component (child) directives

angularjs

angularjs-directive

angularjs-compile