ng的緩存模板的用法

anRui 發布于2019-08-19 17:39 / 1237人閱讀

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

使用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標簽必須在ng-app指令的內部，否則無法被angular context編譯。

$templateCache服務

$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里面調用緩存模板)：

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");
    //調用$sce,設置為可信用的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);
}

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

GPU云服務器云服務器的用法 java的nt的用法 cdn的用法 find的用法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78732.html

angularJS directive用法詳解

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

hlcc 2019-08-20 11:09 評論0 收藏0
Angular directive 實例詳解

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

Jiavan 2019-08-29 10:54 評論0 收藏0
Angular directive 實例詳解

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

BLUE 2019-08-19 18:40 評論0 收藏0
Angular directive 實例詳解

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

mengera88 2019-08-01 15:23 評論0 收藏0