ng的缓存模板的用法

使用ng缓存模板的方式大致有三种:

script tag

<script type="text/ng-template" id="templateId.html"></script>

方式一

html:
<body ng-app="demoModule">
    <div ng-controller="demoCtrl">
        <demo-directive></demo-directive>
    </div>
    
    <script type="text/ng-template" id="templateId.html">
        <a>template cache content</a>
    </script>
    
</body>

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:
<body ng-app="demoModule">
    <demo-directive></demo-directive>
</body>

js:

angular.module('demoModule', [])
    .directive('demoDirective', demoDirectiveFn)
    .run(['$templateCache', templateCacheFn]);
    
function templateCacheFn($templateCache) {
    var tpl = ‘<a ng-click="test()">This is the content of the template {{:: name}}</a>’；
    $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:
<body ng-app="demoModule">
    <div ng-controller="demoCtrl">
        <div ng-bind-html="template"></div>
    </div>
</body>

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 = ‘<a ng-click="test()">This is the content of the template {{:: name}}</a>’；
    $templateCache.put('templateCache.html', tpl);
}

一般编写自定义指令的时候更推荐使用方式2。这样不需要将模块文件嵌入到业务代码当中去，同时只需要修改指令的配置文件就好。

ng的缓存模板的用法

script tag

$templateCache服务

苹果小萝卜

引用和评论

深度解析webpack5持久化缓存

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具