码迷,mamicode.com
首页 > Windows程序 > 详细

野兽的Angular Api 学习、翻译及理解 - - $templateCache 和 $templateRequest

时间:2015-11-28 21:39:49      阅读:249      评论:0      收藏:0      [点我收藏+]

标签:

野兽的ng api学习 -- $templateCache 和 $templateRequest

$templateCache

第一次使用模板,它被加载到模板缓存中,以便快速检索。你可以直接将模板标签加载到缓存中,或者通过$templateCache服务。

通过script标签

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

<p>This is the content of the template</p>

</script>

备注:script标签模板不需要包含在文档头部。但他必须在$rootElement下,不然模板将会被忽略。

通过$templateCache服务

    <div ng-app="Demo">

        <div ng-controller="demoCtrl">

            <!--<div ng-include="‘templateId.html‘"></div>-->

            <div ng-bind-html="text"></div>

        </div>

    </div>

    <script>

        angular.module(‘Demo‘, [])

        .run(["$templateCache",function($templateCache){

            $templateCache.put(‘templateId.html‘, ‘<a>This is the content of the template</a>‘);

        }])

        .controller("demoCtrl", ["$scope","$templateCache","$sce",function ($scope,$templateCache,$sce) {

            var tpl = $templateCache.get(‘templateId.html‘);

            tpl = $sce.trustAsHtml(tpl);

            $scope.text = tpl;

        }])

</script>

 在上面调用模板的代码中,可以使用controller里的代码调用缓存里的模板,但是需要注意的是,需要使用$sce转成受信任的html插入代码,所以这里需要注入$sce服务。而且这边不止可以使用js调用,也可以直接在html里标签里使用ng-include调用。

 

$templateRequest

$templateRequest服务运行进行安全检测,然后使用$http下载被提供的模板,成功后,将内容存储在$templateCache里。如果HTTP请求失败或HTTP请求的响应数据是空的,将抛出个$compile错误(通过设置该函数的第二个参数为true)。该注意的是,$templateCache的内容是可信的,所以调用$sce.getTrustedUrl(tpl)是省略的,当tpl的类型是字符串并且$templateCache具有匹配的项。

使用:$templateRequest(tpl,[ignoreRequestError]);

tpl:字符串或者TrustedResourceUrl,HTTP请求URL的模板。

ignoreRequestError:boolean值,当请求失败或模板为空时,是否忽略该异常。

使用代码:

    <div ng-app="Demo">

        <div ng-controller="demoCtrl">

            <div ng-bind-html="text"></div>

        </div>

    </div>

    <script>

        angular.module(‘Demo‘, [])

        .run(["$templateCache",function($templateCache){

            $templateCache.put(‘templateId.html‘, ‘<a>This is the content of the template</a>‘);

        }])

        .controller("demoCtrl", ["$scope","$templateRequest","$sce",function ($scope,$templateRequest,$sce) {

            $templateRequest("templateId.html").then(function(html){

                $scope.text = $sce.trustAsHtml(html);

            })

        }])

    </script>

野兽的Angular Api 学习、翻译及理解 - - $templateCache 和 $templateRequest

标签:

原文地址:http://www.cnblogs.com/ys-ys/p/5003457.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!