声明：这里纯属学习，瞎搞，真正的实现原理并非如此
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()