angularjs 手动编译代码

有些时候我们会遇到 html不是预先在DOM中定义的情况,比如从后台传递过来的html.
angular出于安全考虑，我们插入的html代码里的事件和绑定的ng-model都不会起作用
这些html 如果含有angularjs的 指令 则需要手动编译下.

使用$compile

1. 基本
   

   
    //获得模版
    var template = $compile("
   {{test}}
   ");
    //数据填充至模版生成 视图
    var newDom = template($scope);
    //填充到指定位置
    $("#test").html(newDom);
    

2. 连写
   

   
    //连这写
    var newDom = $compile("
   {{test}}
   ")($scope);
    $("#test").html(newDom);
    

使用封装的指令

1. 指令
   

   
    (function() {
    'use strict';
    var module = angular.module('angular-bind-html-compile', []);
    module.directive('bindHtmlCompile', ['$compile',
    function($compile) {
    return {
    restrict: 'A',
    link: function(scope, element, attrs) {
    scope.$watch(function() {
    return scope.$eval(attrs.bindHtmlCompile);
    },
    function(value) {
    element.html(value);
    $compile(element.contents())(scope);
    });
    }
    };
    }]);
    } ());
    

2. html/js
   

   
    
    $scope.htmlDom = "
   {{test}}
   ";
    
    

   
   
   
   需要在app.js 中指定依赖angular-bind-html-compile模块. 使用封装指令确实事半功倍.

$interpolate 待写