angular学习之ng-bloak 解决闪屏问题;

            <!doctype html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>Document</title>
                <script src="js/angular.js"></script>
                <style>
                    .ng-cloak{
                        display: none;
                    }
                </style>
            </head>
            <body ng-app="app1" ng-cloak class="ng-cloak ">
               <div  ng-controller="ctrl">
                   {{hello}}
                   <h2 ng-bind="hello"></h2>
                   <input type="text" ng-model="hello">
                   <ul>
                       <li ng-repeat="item in people">我的名字是{{item.name}}我今年{{item.old}}</li>
                   </ul>
                   <button ng-click="fun()">点击</button>
               </div>
            <script>
               var app= angular.module('app1',[]);  //声明出一个模块
               app.controller('ctrl',['$scope',function ($scope) {
                 $scope.hello = "hello word";
                 $scope.people=[
                     {name:'Lily',old:18},
                     {name:'Lucy',old:17},
                     {name:'Henly',old:18},
                 ]
                $scope.fun=function () {
                   alert(1);
                }
               }]);
            </script>
            </body>
            </html>

  在angular的学习和使用过程中会经常使用ng-bind和{{ }}这两种方式进行数据绑定;由于{{ }}的很多优越性最长使用的是
  {{ }},但是今天就来说一下{{ }}在代码生成时出现的一个小bug;当网速很快时ng-bind和{{ }}这两个的表现结果是一样
  的,看不出有什么不同,但是当网速慢时{{ }}刷新时就会在页面中出现{{ }}闪现的情况;这是我们所不想看到的。


        **解决方法**


                     1. 在定义ng-app的div中定义ng-bloak和设置一个叫ng-bloak的类;
                     2. 在页面的style中写 .ng-bloak{display:none}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值