成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

ng的緩存模板的用法

anRui / 1246人閱讀

摘要：使用緩存模板的方式大致有三種方式一指令所在標(biāo)簽必須在指令的內(nèi)部，否則無法被編譯。服務(wù)配合在里面使用指定模板方式二方式三在里面調(diào)用緩存模板調(diào)用設(shè)置為可信用的代碼然后插入模板一般編寫自定義指令的時(shí)候更推薦使用方式。

使用ng緩存模板的方式大致有三種:

script tag

方式一

html:

    

        
    

    
    
    


js:

angular.module("demoModule", [])
    .controller("demoCtrl", ["$scope", "$sce", "$templateCache", demoCtrlFn])
    .directive("demoDirective", ["$templateCache", demoDirectiveFn]);
    
function demoDirectiveFn($templateCache) {
    restrict: "EA",
    template: function() {
        return document.getElementById("templateId.html")
    }
}

PS: 指令ng-template所在script標(biāo)簽必須在ng-app指令的內(nèi)部，否則無法被angular context編譯。

$templateCache服務(wù)

$templateCache+$sce配合ng-bind-html="templateId.html"

or 在directive里面使用templateUrl指定模板

方式二：

html:

    


js:

angular.module("demoModule", [])
    .directive("demoDirective", demoDirectiveFn)
    .run(["$templateCache", templateCacheFn]);
    
function templateCacheFn($templateCache) {
    var tpl = ‘This is the content of the template {{:: name}}’；
    $templateCache.put("templateCache.html", tpl);
}

function demoDirective(){
    return {
        restrict: "EA",
        templateUrl: "templateCache.html",
        link: function(scope, ele, attr){
            scope.test = function() {
                console.log(123);
            }
            
            scope.name = "Hello templateCache";
        }
    }
}

方式三(在controller里面調(diào)用緩存模板)：

html:

    

        

    



js:

angular.module("demoModule", [])
    .controller("demoCtrl", ["$sce", "$templateCache", "$scope",            demoCtrl])
    .run(["$templateCache", templateCacheFn]);
    
function demoCtrl($sce, $templateCache, $scope) {
    var tpl = $templateCache.get("template.html");
    //調(diào)用$sce,設(shè)置為可信用的html代碼然后插入模板
    tpl = $sce.trustAsHtml(tpl);
    
    $scope.template = tpl;
    
    $scope.test = function() {
        console.log(123);
    }
    
    $scope.name = "Hello templateCache";
}

    
function templateCacheFn($templateCache) {
    var tpl = ‘This is the content of the template {{:: name}}’；
    $templateCache.put("templateCache.html", tpl);
}

一般編寫自定義指令的時(shí)候更推薦使用方式2。這樣不需要將模塊文件嵌入到業(yè)務(wù)代碼當(dāng)中去，同時(shí)只需要修改指令的配置文件就好。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78732.html

相關(guān)文章

  • angularJS directive用法詳解

    摘要：可選參數(shù)，布爾值或者對(duì)象默認(rèn)值為，可能取值默認(rèn)值。布爾值或者字符，默認(rèn)值為這個(gè)配置選項(xiàng)可以讓我們提取包含在指令那個(gè)元素里面的內(nèi)容，再將它放置在指令模板的特定位置。 前言 最近學(xué)習(xí)了下angularjs指令的相關(guān)知識(shí)，也參考了前人的一些文章，在此總結(jié)下。 歡迎批評(píng)指出錯(cuò)誤的地方。 Angularjs指令定義的API showImg(https://segmentfault.com/img...

    hlcc 評(píng)論0 收藏0

  • Angular directive 實(shí)例詳解

    摘要：方法三使用調(diào)用父作用域中的函數(shù)實(shí)例地址同樣采用了缺省寫法，運(yùn)行之后，彈出窗口布爾值或者字符，默認(rèn)值為這個(gè)配置選項(xiàng)可以讓我們提取包含在指令那個(gè)元素里面的內(nèi)容，再將它放置在指令模板的特定位置。 準(zhǔn)備代碼，會(huì)在實(shí)例中用到 var app = angular.module(app, []); angular指令定義大致如下 app.directive(directiveName, functi...

    Jiavan 評(píng)論0 收藏0

  • Angular directive 實(shí)例詳解

    摘要：方法三使用調(diào)用父作用域中的函數(shù)實(shí)例地址同樣采用了缺省寫法，運(yùn)行之后，彈出窗口布爾值或者字符，默認(rèn)值為這個(gè)配置選項(xiàng)可以讓我們提取包含在指令那個(gè)元素里面的內(nèi)容，再將它放置在指令模板的特定位置。 準(zhǔn)備代碼，會(huì)在實(shí)例中用到 var app = angular.module(app, []); angular指令定義大致如下 app.directive(directiveName, functi...

    BLUE 評(píng)論0 收藏0

  • Angular directive 實(shí)例詳解

    摘要：方法三使用調(diào)用父作用域中的函數(shù)實(shí)例地址同樣采用了缺省寫法，運(yùn)行之后，彈出窗口布爾值或者字符，默認(rèn)值為這個(gè)配置選項(xiàng)可以讓我們提取包含在指令那個(gè)元素里面的內(nèi)容，再將它放置在指令模板的特定位置。 準(zhǔn)備代碼，會(huì)在實(shí)例中用到 var app = angular.module(app, []); angular指令定義大致如下 app.directive(directiveName, functi...

    mengera88 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<