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

> 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
                }); 
            });
        }); 
}]);

原文链接：https://www.f2er.com/angularjs/143174.html

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

猜你在找的Angularjs相关文章