声明：这里纯属学习，瞎搞，真正的实现原理并非如此
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<title>Title</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="demo1">
<!--ng-bind-->
</div>
<h1>=================================================</h1>
<div id="demo2">
<!--ng-bind-html-->
</div>
<script>
/**
* 获取数据
* 瞎吓jb玩ng-bind
*/
$.post(‘data.json‘, function (data) {
//获取模板
$.get(‘html/tpl01.html‘, function (getData) {
for (var i = 0, len = data.length; i < len; i++) {
var _cloneHtml = getData
for (var key in data[i]) {
// 直接替换
_cloneHtml = _cloneHtml.replace(‘{{‘ + key + ‘}}‘, data[i][key])
}
$(‘#demo1‘).append(_cloneHtml)
}
})
})
/**
* 获取数据
* 瞎吓jb玩ng-bind-html
*/
$.post(‘data.json‘, function (data) {
//获取模板
$.get(‘html/tpl02.html‘, function (getData) {
for (var i = 0, len = data.length; i < len; i++) {
$(‘#demo2‘).append(getData)
for (var key in data[i]) {
// 自定义标记,这里必须要循环，否则当i等于几$(‘[ng-bind-html="‘ + key + ‘"]‘)取得的位数组长度就是几，导致无法绑定上后面的值
$(‘[ng-bind-html="‘ + key + ‘"]‘).each(function () {
if(!$(this).hasClass(‘ng-bind‘)){
$(this).html(data[i][key]).addClass(‘ng-bind‘)
}
})
}
}
})
})
</script>
</body>
</html>
html/tpl01.html
<h1>{{name}}</h1>
<h2>{{age}}</h2>
<h3>{{sex}}</h3>
html/tpl02.html
<h1 ng-bind-html="name"></h1> <h2 ng-bind-html="age"></h2> <h3 ng-bind-html="sex"></h3>
下期预告：瞎搞react：ReactDom.render()
时间： 2024-10-24 15:22:27