标签：
在应用级开发中，我们经常会动态将一段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 });
标签：
原文地址：http://www.cnblogs.com/jquery-angular/p/4656280.html
