ng的缓存模板的用法

anRui 发布于2019-08-19 17:39 / 1131人阅读

摘要：使用缓存模板的方式大致有三种方式一指令所在标签必须在指令的内部，否则无法被编译。服务配合在里面使用指定模板方式二方式三在里面调用缓存模板调用设置为可信用的代码然后插入模板一般编写自定义指令的时候更推荐使用方式。

使用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。这样不需要将模块文件嵌入到业务代码当中去，同时只需要修改指令的配置文件就好。

专线服务私有云的用法 java的nt的用法 cdn的用法 find的用法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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