什么是 ng-transclude?

本文介绍了什么是 ng-transclude?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在 StackOverflow 上看到了许多讨论 ng-transclude 的问题，但没有一个用外行的术语解释它是什么.

文档中的描述如下:

标记使用嵌入的最近父指令的嵌入 DOM 的插入点的指令.

这相当令人困惑.有人能用简单的术语解释 ng-transclude 的目的是什么以及它可以用在什么地方吗?

解决方案

Transclude 是一个设置，它告诉 angular 捕获放在标记中指令内的所有内容并在某处使用它在指令的模板中.在

可视化:

I have seen a number of questions on StackOverflow discussing ng-transclude, but none explaining in layman's terms what it is.

The description in the documentation is as follows:

This is fairly confusing. Would someone be able to explain in simple terms what ng-transclude is intended to do and where it might be used?

解决方案

Transclude is a setting to tell angular to capture everything that is put inside the directive in the markup and use it somewhere in the directive's template. Read more about this under Creating a Directive that Wraps Other Elements section on documentation of directives.

If you write a custom directive you use ng-transclude in the directive template to mark the point where you want to insert the contents of the element

angular.module('app', [])
  .directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

If you put this in your markup

<hero name="superman">Stuff inside the custom directive</hero>

It would show up like:

Full example :

Index.html

<body ng-app="myApp">
  <div class="AAA">
   <hero name="superman">Stuff inside the custom directive</hero>
</div>
</body>

jscript.js

angular.module('myApp', []).directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

Output markup

Visualize :

这篇关于什么是 ng-transclude?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！