angular学习笔记之动态试图

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

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

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

第975行：

ngViewFillContentFactory.$inject = ['$compile', '$controller', '$route'];
function ngViewFillContentFactory($compile, $controller, $route) {
  return {
    restrict: 'ECA',
    priority: -400,
    link: function(scope, $element) {
      var current = $route.current,
          locals = current.locals;

      $element.html(locals.$template);

      var link = $compile($element.contents());

      if (current.controller) {
        locals.$scope = scope;
        var controller = $controller(current.controller, locals);
        if (current.controllerAs) {
          scope[current.controllerAs] = controller;
        }
        $element.data('$ngControllerController', controller);
        $element.children().data('$ngControllerController', controller);
      }

      link(scope);
    }
  };
}

这是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的扩展。

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

        $(function () {
            $("#btnLoadView").click(function () {
                $("#dynamicView").load("dynamicView.html", function () {
                    angular.compileView(this);
                });
            }); 
        });