有些时候我们会遇到 html不是预先在DOM中定义的情况,比如从后台传递过来的html.
angular出于安全考虑，我们插入的html代码里的事件和绑定的ng-model都不会起作用
这些html 如果含有angularjs的 指令 则需要手动编译下.
使用$compile
基本
<pre>
//获得模版
var template = $compile("<div ng-click='testFun();'>{{test}}</div>");
//数据填充至模版生成 视图
var newDom = template($scope);
//填充到指定位置
$("#test").html(newDom);
</pre>连写
<pre>
//连这写
var newDom = $compile("<div>{{test}}</div>")($scope);
$("#test").html(newDom);
</pre>
使用封装的指令
指令
<pre>
(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);
});
}
};
}]);
} ());
</pre>html/js
<pre>
<code>
$scope.htmlDom = "<div ng-click='testFun();'>{{test}}</div>";
<code>
</pre>
<pre>
<div bind-html-compile="htmlDom" ></div>
</pre>
需要在app.js 中指定依赖angular-bind-html-compile模块. 使用封装指令确实事半功倍.
