Question

这是我的傻瓜：http://plnkr.co/edit/A0s3kafWD1WIaFcwimIT?p=preview

我正在尝试将指令嵌套在另一个指令中，但它无效。

角：

app.directive('test', function() {
  return {
    restrict: 'E',
    template: '<div>Hello Parent</div>'
  }
})


app.directive('childtest', function() {
  return {
    restrict: 'E',
    template: '<div>Hello Child</div>'
  }
})

HTML：

<test>
  <childtest>  
  </childtest>
</test>

我如何正确地做到这一点？

Answer 1

我认为这在很大程度上取决于您的实际用例，但您有一些选择：

不要给父指令一个模板：

app.directive('test', function() {
  return {
    restrict: 'E'
  }
});

app.directive('childtest', function() {
  return {
    restrict: 'E',
    template: '<div>Hello Child</div>'
  }
});

HTML

<test>
  <childtest>  
  </childtest>
</test>

将孩子放在父母的模板中：

app.directive('test', function() {
  return {
    restrict: 'E',
    template: '<div>Hello parent <childtest></childtest></div>'
  }
});

app.directive('childtest', function() {
  return {
    restrict: 'E',
    template: '<div>Hello Child</div>'
  }
});

HTML

<test></test>

为父级提供模板，并使用transclusion将子指令移动到模板

中

app.directive('test', function() {
  return {
    restrict: 'E',
    transclude: true,
    template: '<div>Hello Parent <div ng-transclude></div></div>'
  }
});

app.directive('childtest', function() {
  return {
    restrict: 'E',
    template: '<div>Hello Child</div>'
  }
});

HTML

<test>
  <childtest>  
  </childtest>
</test>

Answer 2

基本上我认为你在寻找的是ng-transclude。它的作用是允许你将任何子元素保留在自定义指令中 - 同时仍允许你在这些子元素之前或之后添加元素。

包括此，基本上您的父指令更改为：

app.directive('test', function() {
  return {
    restrict: 'E',
    transclude: true,
    template: '<div>Hello Parent<div ng-transclude></div></div>'

  }
});

<div ng-translcude></div>准确地告知角度您希望孩子包含在哪里，并添加transclude: true告诉您想要拥有此行为的角度。在这里查看您更新的plunker：http://plnkr.co/edit/HL9PD6U4V7p56T3Cqx5F?p=preview

以角度嵌套指令的正确方法

2 个答案: