Question

此程序仅为parent-directive提供输出。我该怎么做才能显示child-directive指令？

这是我的程序

<div ng-app="Myapp">
  <parent-directive>
    <!--parent directive -->
    <child-directive>
      <!--child directive -->
    </child-directive>
  </parent-directive>
</div>

这是用于创建父指令和子指令函数的angularjs代码

var app = angular.module("Myapp", []);
app.directive("parentDirective", function() {
  return {
    restrict: "E",
    template: "<p>Hello this is parent directive</p>",

  };

});
app.directive("childDirective", function() {
  return {
    restrict: "E",
    template: "<p>Hello this is child directive</p>",
  };

});

Answer 1

这不起作用，因为您的父指令的模板会覆盖您在<parent-directive></parent-directive>之间声明的html。为避免这种情况，您必须允许在父指令中进行转换：

app.directive("parentDirective",function(){
  return {
    restrict:"E",
    transclude: true,
    template:"<p>Hello this is parent directive</p><div ng-transclude></div>"
  };
});

然后，只要在父指令的模板中声明 ng-transclude ，就会插入child指令。可以在这里找到一个非常好的解释： https://thinkster.io/egghead/transclusion-basics

将数据绑定到父指令中存在的自定义子指令

1 个答案: