angular指令的transclude選項以及ng-transclude指令

時間  2019-11-09
標籤 angular 指令 transclude 選項 以及 欄目 AngularJS 简体版
原文   原文鏈接

今天咱們來研究一下如何使用ng-transclude指令,以及指令的transclude選項；首先要說明咱們使用的angular的版本是1.5.0，由於不一樣版本的表現結果不是那麼相同。html

首先咱們應該瞭解到，在angular指令的選項中，有一項是transclude，這個選項有三種值：false，true，object；那這三種值分別表示什麼，該如何選擇？下面咱們來詳細的說明一下。angularjs

transclude字面意思就是嵌入，也就是說你需不須要將你的指令內部的元素（注意不是指令的模板）嵌入到你的模板中去，默認是false。若是你須要這種功能的話，那麼就須要將transclude設置爲true或者{...}。若是將這個值設置爲true或者{...}的話，那麼就要配合angular的ng-transclude指令來進行使用，好，廢話很少說了，看代碼是最好的學習方法，咱們下面就來根據代碼來了解掌握這些東西。app

代碼的結果能夠在這裏看到，完整的代碼會在後面貼出來，如今咱們來看第一個指令部分學習

  • 在頁面中使用的形式this

    <!--  指令one-transclude 內部含有元素-->
<one-transclude class="one-transclude-self">
    <div class="one-transclude-self__footer">$AAAAAA $我是指令[one-transclude]元素內部的內容</div>
</one-transclude>

    咱們定義了一個名字叫作one-transclude的指令，也就是說這個指令的模板中只有一個嵌入點的，指令內部是有一些元素的我給內部的元素的內容作了一些標記，方便咱們後面觀察。spa

  • JavaScript代碼部分rest

    angular.module('app', [])
    .directive('oneTransclude', oneTransclude);

function oneTransclude() {
    return {
        restrict: 'AE',
        transclude: true,
        templateUrl: 'one-transclude.html'
    };
}

    咱們在JavaScript中定義oneTransclude，注意咱們這裏transclude=true，代表咱們但願在模板中將指令的內部元素嵌入到模板中的某個位置。code

  • 指令的模板部分htm

    <div class="one-transclude">
    <div class="one-transclude__title">
        $BBBBBB$ 我是指令[one-transclude]模板的內容
    </div>
    <hr>
    <ng-transclude>
        $CCCCCC$ 我是指令[one-transclude]模板中[ng-transclude]中的內容
     </ng-transclude>
</div>

    上面書寫了咱們的指令模板，能夠看到咱們的模板由兩部分組成，一部分是含有ng-transclude指令的，一部分是不含有這個指令的。固然我也把這些裏面的內容做了一些標記，方便後面咱們觀察。由於這裏的ng-transclude後面不帶有參數，因此指令裏面的元素就是那些以$AAAAAA$開頭的整塊元素都會嵌入到指令模板中含有ng-transclude指令的內部，還要注意，若是指令模板中含有ng-transclude指令的元素內部也有元素的話，那麼這些元素會被替代。還有一種狀況，那就是若是指令裏面不含有元素，那麼指令模板裏面的含有ng-transclude指令的元素的內部元素會顯示出來對象

  • 咱們能夠看下圖更直觀的瞭解一下。
    圖片描述

多個嵌入點的狀況，這時候指令內部的ng-transclude的值是一個對象，一種映射關係；具體的能夠看下面的代碼：

  • 指令在頁面中使用的代碼：

    <!-- 指令mutil-transclude -->
<multi-transclude>
    <multi-transclude-title>我是指令元素內部的title</multi-transclude-title>
    <multi-transclude-body>我是指令元素內部的body</multi-transclude-body>
    <multi-transclude-footer>我是指令元素內部的footer</multi-transclude-footer>
</multi-transclude>

    咱們在頁面中使用了multi-transclude這個指令，在指令的內部還有三個指令，這內部的三個指令要以E的形式應用，否則會出現問題，看到這裏不明白的不要緊，繼續往下看。

  • JavaScript代碼中的指令：

    angular.module('app', [])
    .directive('multiTransclude', multiTransclude);
    
function multiTransclude() {
    return {
        restrict: 'AE',
        transclude: {
            'title': 'multiTranscludeTitle',
            'body': 'multiTranscludeBody',
            'footer': '?multiTranscludeFooter'
        },
        templateUrl: 'multi-transclude.html'
    };
}

    咱們的transclude對象定義瞭如何將多個嵌入點與指令內部的指令嵌入點一一對應，拿'footer': '?multiTranscludeFooter'來解釋一下，footer對應指令模板中的一個嵌入點，multiTranscludeFooter對應指令元素內部的哪一個multi-transclude-footer指令，前面的?表示這個嵌入點不必定有對應的指令存在。固然multiTranscludeFooter是咱們本身定義的，能夠隨意定義，可是儘可能作到讓你們一看就知道是對應哪一個嵌入點就行。

  • 指令對應的模板

    <div class="multi-transclude">
    <div class="multi-transclude__title" ng-transclude="title"></div>
    <div>忽略我,我就是證實我是在模板中的1</div>
    <div class="multi-transclude__body" ng-transclude="body"></div>
    <div>忽略我,我就是證實我是在模板中的2</div>
    <div class="multi-transclude__footer" ng-transclude="footer"></div>
</div>

    從上面的模板中咱們能夠看到，指令ng-transclude後面的字符串就是咱們定義的嵌入點，也就是上面指令定義時候用到的那些字符串。

到這裏關於ng-transclude以及angular指令的transclude選項我想你們應該都明白了。

完整的代碼部分

  • index.html

    <body ng-controller="MyController as vm">

<h1 ng-bind="vm.title"></h1>

<h2>指令one-transclude 內部含有元素</h2>
<!--  指令one-transclude 內部含有元素-->
<one-transclude class="one-transclude-self">
    <div class="one-transclude-self__footer">$AAAAAA $我是指令[one-transclude]元素內部的內容</div>
</one-transclude>


<h2>指令one-transclude 內部不含有元素</h2>
<!-- 指令one-transclude 內部不含有元素 -->
<one-transclude class="one-transclude-self"></one-transclude>

<h2>指令mutil-transclude</h2>
<!-- 指令mutil-transclude -->
<multi-transclude>
    <multi-transclude-title>我是指令元素內部的title</multi-transclude-title>
    <multi-transclude-body>我是指令元素內部的body</multi-transclude-body>
    <multi-transclude-footer>我是指令元素內部的footer</multi-transclude-footer>
</multi-transclude>

</body>

  • app.js

    (function() {
angular.module('app', [])
    .controller('MyController', myController)
    .directive('oneTransclude', oneTransclude)
    .directive('multiTransclude', multiTransclude);

myController.$inject = [];

function myController() {
    var vm = this;
    vm.title = 'ng-transclude';
}

function oneTransclude() {
    return {
        restrict: 'AE',
        transclude: true,
        templateUrl: 'one-transclude.html'
    };
}

function multiTransclude() {
    return {
        restrict: 'AE',
        transclude: {
            'title': 'multiTranscludeTitle',
            'body': 'multiTranscludeBody',
            'footer': '?multiTranscludeFooter'
        },
        templateUrl: 'multi-transclude.html'
    };
}
})();

  • one-transclude.html

    <div class="one-transclude">
    <div class="one-transclude__title">
        $BBBBBB$ 我是指令[one-transclude]模板的內容
    </div>
    <hr>
    <ng-transclude>
        $CCCCCC$ 我是指令[one-transclude]模板中[ng-transclude]中的內容
    </ng-transclude>
</div>

  • multi-transclude.html

    <div class="multi-transclude">
    <div class="multi-transclude__title" ng-transclude="title"></div>
    <div>忽略我,我就是證實我是在模板中的1</div>
    <div class="multi-transclude__body" ng-transclude="body"></div>
    <div>忽略我,我就是證實我是在模板中的2</div>
    <div class="multi-transclude__footer" ng-transclude="footer"></div>
</div>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程