AngularJS：在一个角指令transcluding多个子元素 [英] AngularJS : transcluding multiple sub elements in a single Angular directive

问题描述

我是相当新的角度，但一直在读了不少。
我正在读关于 NG-transclude 在<一个href=\"http://docs.angularjs.org/guide/directive#creating-custom-directives_demo_isolating-the-scope-of-a-directive\">http://docs.angularjs.org/guide/directive#creating-custom-directives_demo_isolating-the-scope-of-a-directive我想我理解正确它做什么。

I am Fairly new to Angular but have been reading quite a lot. I was reading about ng-transclude at http://docs.angularjs.org/guide/directive#creating-custom-directives_demo_isolating-the-scope-of-a-directive and I think I understand properly what it does.

如果您有适用于具有里面的内容，如在一个元素指令

If you have a directive that applies to an element that has content inside it such as in

<my-directive>directive content</my-directive>

这将让你与 NG-transclude 并列入元素将被标记的元素中呈现的内容标签指令的模板中的一个元素。

It will allow you to tag an element within the directive's template with ng-transclude and the content included in the element would be rendered inside the tagged element.

因此​​，如果模板 myDirective 是＆LT; D​​IV＆GT;之前＆LT; / DIV＆GT;＆LT; D​​IV NG-transclude＆GT;＆LT; / DIV＆GT; ＆LT; D​​IV＆gt;在＆LT; / DIV＆GT;
它会呈现为beforedirective contentafter。

so if the template for myDirective is <div>before</div><div ng-transclude></div><div>after</div> it would render as beforedirective contentafter.

这是所有O.K.
我的Q值是它可能以某种方式传递更多然后HTML单块到我的指令？

this is all o.k. my Q is is it possible to somehow pass more then a single block of html into my directive?

例如。

假设指令的用法是这样的：

suppose the directive usage would look like this:

<my-multipart-directive>
     <part1>content1</part1>
     <part2>content2</part2>
</my-multipart-directive>

和有这样一个模板：

<div>
  this: <div ng-transclude="part2"></div>
   was after that: <div ng-transclude="part1"></div>
   but now they are switched
<div>

渲染为

<div>
  this: <div ng-transclude="part2">content2</div>
   was after that: <div ng-transclude="part1">content1</div>
   but now they are switched
<div>

（心里对自己说）我能以某种方式的一个节点的HTML值绑定到模型，使我能够以这样的方式来使用它，而把它称为transclude...

(thinking to myself) Could I somehow bind the HTML value of a node to the model so that I will be able to use it in such a way without calling it "transclude" ...

感谢

推荐答案

启动角1.5，它现在可以创建多个插槽。取而代之的 transclude：真正的上，您提供的目标每个插槽的映射：

Starting Angular 1.5, it's now possible to create multiple slots. Instead of transclude:true, you provide an object with the mappings of each slot:

<一个href=\"https://docs.angularjs.org/api/ng/directive/ngTransclude\">https://docs.angularjs.org/api/ng/directive/ngTransclude

angular.module('multiSlotTranscludeExample', [])
 .directive('pane', function(){
    return {
      restrict: 'E',
      transclude: {
        'title': '?pane-title',
        'body': 'pane-body',
        'footer': '?pane-footer'
      },
      template: '<div style="border: 1px solid black;">' +
                  '<div class="title" ng-transclude="title">Fallback Title</div>' +
                  '<div ng-transclude="body"></div>' +
                  '<div class="footer" ng-transclude="footer">Fallback Footer</div>' +
                '</div>'
    };
})

这篇关于AngularJS：在一个角指令transcluding多个子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！