angular学习笔记之动态试图

在应用级开发中，我们经常会动态将一段html作为试图进行展示，这是很常用的功能，然而angular并未直接给出相应的解决方案，那我们应该如何来做？

说到如何实现动态试图功能，那我们就得去研究下angular-router，angular-router提供了动态路由、动态试图的机制。

angular-router版本：AngularJS v1.3.9-local+sha.a3c3bf3

第975行：

 1 ngViewFillContentFactory.$inject = [‘$compile‘, ‘$controller‘, ‘$route‘];
 2 function ngViewFillContentFactory($compile, $controller, $route) {
 3   return {
 4     restrict: ‘ECA‘,
 5     priority: -400,
 6     link: function(scope, $element) {
 7       var current = $route.current,
 8           locals = current.locals;
 9
10       $element.html(locals.$template);
11
12       var link = $compile($element.contents());
13
14       if (current.controller) {
15         locals.$scope = scope;
16         var controller = $controller(current.controller, locals);
17         if (current.controllerAs) {
18           scope[current.controllerAs] = controller;
19         }
20         $element.data(‘$ngControllerController‘, controller);
21         $element.children().data(‘$ngControllerController‘, controller);
22       }
23
24       link(scope);
25     }
26   };
27 }

这是ngview的指令代码，这里我们主要关注两句话：

$element.html(locals.$template);//将读取的html插入到相应的dom对象中

var link = $compile($element.contents());//编译html模板

原来如此啊，新加入的模板（试图）只需要从新编译下即可。

好了那么我们来做个一个辅助方法(本人刚学angular很多东西还没来得急研究，对jquery熟习，因此下面的辅助方法使用了jquery)：

(function () {
    var compileView = function (dom) {
        //获取该dom所在的app
        var appElement = $(dom).closest(".ng-scope[ng-app]");
        //获取app的注入器
        var injector = appElement.data("$injector");
        injector.invoke(function ($compile) {
            var scope = $(dom).scope();
            //编译模板(试图)
            $compile($(dom))(scope);
            //通知更改
            scope.$apply();
        });
    }

    //扩展angular
    $.extend(angular, {
        //动态编译试图
        compileView: compileView
    });

    //基于jquery的扩展，实现动态试图
    $.fn.compileView = function () {
        var dom = this;
        compileView(this);
    }
})(jQuery);

这里提供了两种方式一种是基于jquery的扩展，一种是基于angular的扩展。

代码很简单，不多解释了，来个例子：

1         $(function () {
2             $("#btnLoadView").click(function () {
3                 $("#dynamicView").load("dynamicView.html", function () {
4                     angular.compileView(this);
5                 });
6             });
7         });