<!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}