如何在AngularJs中使用ng-Cloak指令的实际使用？

发布时间：2020-12-17 07:48:23 所属栏目：安全来源：网络整理

导读：What is the ng-cloak directive? 为什么我们用它？ NG-斗篷从文档： The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading

> What is the ng-cloak directive?
>为什么我们用它？

NG-斗篷

从文档：

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

简而言之,您可以使用ng-cloak指令来防止未编译的元素被显示.未编译的元素可以是一个保存并等待传入??数据的元素：

<div ng-cloak>{{myvar}}</div>

如果myvar控制器尚未编译或数据未填充ng-cloak,则会阻止“{{myvar}}”显示,并且只会在编译变量时显示该div.

按照这个代码示例,并检查到results有没有ng-cloak：

<style>
    [ng:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-    ng-cloak {
        display: none !important;
    }
</style>

<body ng-controller="MyController" ng-cloak>
    <h3>ngCloak Example</h3>
        <ol >
            <li ng-repeat="item in myData">
                {{item.title}}
            </li>
        </ol>
</body>


var myApp= angular.module("myApp",['ngResource']);

myApp.controller("MyController",["$scope","$resource","$timeout",function($scope,$resource,$timeout){
        $scope.myData =[];

        var youtubeVideoService = $resource("https://gdata.youtube.com/feeds/api/videos?q=googledevelopers&max-results=5&v=2&alt=jsonc&orderby=published");

        youtubeVideoService.get()
            .$promise.then(function(responseData) {

        angular.forEach(responseData.data.items,function(aSingleRow){
                console.log(aSingleRow);
                $scope.myData.push({
                    "title":aSingleRow.title
                }); 
            });
        }); 
}]);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!