angular的时间指令 以及防止闪烁问题

时间:2022-04-21 16:58:44

1、点击事件

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div ng-app="myapp" ng-controller="myctrl">
<input ng-click="fun()" type="button" value="点击" />
<div id="box"></div>
</div>
</body>
<script src="js/angurlar素材/angular/angular.js"></script>
<script>
var app =angular.module("myapp",[]);
app.controller("myctrl",function($scope){
$scope.fun=function(){
box.innerHTML="你好"
}
})
</script>
</html>

2、防止闪烁问题

大家都知道在浏览器加载过程中是从上到下加载的,所以说在加载用angular写的页面时候会出现零点几毫秒的闪烁加载,我们可以用以下几种方法来消除闪烁问题

(1)ng-bind绑定指令

<div ng-app="myapp" ng-controller="myctrl">

   <span ng-bind="data"></span>

</div>

<script>

var app = angular.module("myapp",[]).controller("myctrl",function($scope){

$scope.data="你好";

}

</script>

(2)ng-cloak预先加载指令

<div ng-app="myapp" ng-controller="myctrl">

   <span ng-cloak>{{data}}</span>

</div>

<script>

var app = angular.module("myapp",[]).controller("myctrl",function($scope){

$scope.data="你好";

}

</script>