angular ng-cloak 防止显示原始的模版页面

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Bootstrap-manual</title>
    <style type="text/css">
        .ng-cloak {
            display: none;
        }
    </style>
</head>
<body>
    这里是ng-app外面的~~{{1+2}}
    <div id="rootOfApp">这里是ng-app里面~~~{{1+3*2}}</div>
    <script src="../angular-1.0.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        angular.element(document).ready(function() {
            angular.bootstrap(angular.element(document.getElementById("rootOfApp")));
        });
    </script>
</body>
</html>

 注:里面的”ng-cloak”,这个是用于在angular.js编译完成之前(对!没错!是编译完成之前,不是angularjs加载完成之前。所以,如果想很好地避免这个情况,最好的办法是优化应用的加载流程,或者结合css对未编译的模版进行处理。而由于那万恶的ie6、7不支持属性选择器,所以最好使用class=”ng-cloak”的方式。编译完成后,这个class或属性会被删除。)隐藏模版,避免在页面显示原模版。

你可能感兴趣的:(angular ng-cloak 防止显示原始的模版页面)