angular ng-cloak解决屏幕闪烁问题

来源:互联网 发布:手机淘宝我的店铺在哪 编辑:程序博客网 时间:2024/05/21 18:48

ng-cloak 指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现的问题。

AngularJS 应用在加载时,文档可能会由于AngularJS 代码未加载完而出现显示 AngularJS 代码,进而会有闪烁的效果, ng-cloak 指令是为了防止该问题的发生。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.ng-cloak{display: none;}</style></head><body ng-app="hd"><div ng-controller="ctrl" ng-cloak class="ng-cloak"><h1 ng-bind="name"></h1>{{name}}asdasd</div></body></html><script src="angular.min.js"></script><script>var m = angular.module('hd',[]);m.controller('ctrl',['$scope',function($scope){$scope.name='我收好人';}])</script>

在需要包含ng表达式元素上面加上ng-cloak这个属性,并同样加上一个ng-cloak这个类,然后在css样式中给“display:none;”这样的属性。

0 0
原创粉丝点击