AngularJS动态绑定html
在web开发中我们经常需要将动态拼接的html字符串绑定到页⾯DOM上。
AngularJS中我们可以使⽤指令ng-bind-html来绑定动态Html，它会将计算出来的表达式结果⽤innerHtml绑定到html。
但是AngularJS默认是不相信添加的html内容的，所以我们需要调⽤$sce(Strict Contextual Escaping)服务来解决问题。
$sce is included by default starting with angular 1.2
<!DOCTYPE html>
<html ng-app ="myApp">
<head>
<meta charset="utf-8">
<script src="cdn.static.runoob/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
body{
border: 5px solid #FF851B;
padding: 10px;
}
.info{
color:#0074D9;
}
.age{
color:#FF4136;
}
</style>
</head>
<body ng-controller="myCtrl">
<div ng-bind-html="html"></div>
<script>
.controller("myCtrl", ["$scope","$sce",function($scope,$sce) {
$age = 16;
$Info = {
name:"chenjy"
};
var html ="<div>my name:<span class='info'>chenjy</span>,my age:<span class='age'>16</span></div>";
$scope.html = $ustAsHtml(html);
}]);
angular和angularjs</script>
</body>
</html>
对于静态html这就够了，但是我们如果需要⽤到AngularJS强⼤的双向数据绑定能⼒
var html ="<div>my name:<span class='info'>{{myInfo.name}}</span>,my age:<span class='age'>{{myage}}</span></div>";
ng-bind-html并不会和$scope双向绑定，并且ng-click等指令也不会得到compile
我们可以借助$compile编译html
<body ng-controller="myCtrl">
<script>
.controller("myCtrl", ["$scope","$compile",function($scope,$compile) {
$age = 16;
$Info = {
name:"chenjy"
};
var template ="<div>my name:<span class='info'>{{myInfo.name}}</span>,my age:<span class='age'>{{myage}}</span></div>";
var ele =  $compile(template)($scope);
angular.element(document.body).append(ele);
}]);
</script>
</body>
但是AngularJS中我们最好直接写在directive的link中，此时编译阶段已经结束我们可以⼿动编译html。
.directive("myDir", ["$compile",function($compile) {
return {
restrict: "E",
link: function(scope, iElement, iAttrs) {
var template = "<div>my name:<span class='info'>{{myInfo.name}}</span>,my age:<span class='age'>{{myage}}</span></div><input type='text' ng-model='myage' />";      var ele = $compile(template)(scope);
iElement.append(ele);
}
};
}]);
下⾯贴⼀个⽹上看到的⽐较通⽤的compile例⼦
<!DOCTYPE html>
<html ng-app ="myApp">
<head>
<meta charset="utf-8">
<script src="cdn.static.runoob/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
body{
border: 5px solid #FF851B;
padding: 10px;
}
.info{
color:#0074D9;
}
.
age{
color:#FF4136;
}
</style>
</head>
<body ng-controller="myCtrl">
<html-compile html='{{html}}'></html-compile>
<script>
.controller("myCtrl", ["$scope","$sce",function($scope,$sce) {
$age = 16;
$Info = {
name:"chenjy"
};
$scope.changeAge = function(){
$age ++;
};
$scope.html ="<button ng-click='changeAge()'>change</button><div>my name:<span class='info'>{{myInfo.name}}</span>,my age:<span class='age'>{{myage}}</span></div>";    }]).directive("htmlCompile", ["$compile", function($compile) {
return {
replace: true,
restrict: 'EA',
link: function(scope, elm, iAttrs) {
var DUMMY_SCOPE = {
$destroy: p
},
root = elm,
childScope,
destroyChildScope = function() {
(childScope || DUMMY_SCOPE).$destroy();
};
// 监听html值
iAttrs.$observe("html", function(html) {
/
**
* 当传⼊html的时候先尝试销毁⼦scope，然后创建⼀个⼦scope,compile当前html，替换掉当前DOM
**/
if (html) {
destroyChildScope();
childScope = scope.$new(false);
var content = $compile(html)(childScope);
root = content;
}
// 在⽗scope销毁的时候，销毁该⼦scope
scope.$on("$destroy", destroyChildScope);
});
}
};
}]);
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。