• 把Directive变为一个容器transclude

    把Directive变为一个容器transclude

    在前面我们使用到的Directive,都会将包含有Directive的元素整体替换为template中的内容。这样,就让Directive的用途缩减为只能封装最低级别的元素。

    但是我们使用的ng-app,ng-controller等,也同样都是Directive,而我们可以在这些元素中,直接填入HTML代码。这是如何实现的呢?这就要应用到Directive的transclude属性。

    1. App.directive("formDirective", function () {
    2. return {
    3. restrict: "A",
    4. //通过transclude标签将Directive变为一个容器
    5. transclude: true,
    6. //注意template中的ng-transclude,这里是放置原有代码的地方。
    7. template: "<h1>标题</h1><p>这里是段落文字</p><div ng-transclude></div>"
    8. }
    9. });
    1. <div ng-controller="FirstCtrl">
    2. <div form-directive>
    3. <p>这段文字是放置在Directive中间的。</p>
    4. </div>
    5. </div>

    运行结果:

    图5-14 transclude的使用

    查看HTML代码如下:

    图5-15 transclude的效果HTML