瞎搞ng-bind-html和ng-bind实现

声明：这里纯属学习，瞎搞，真正的实现原理并非如此

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()