1

我正在研究 angularjs。我创建了一个脚本。当我开始在浏览器上应用时，出现这样的情况，

在此处输入图像描述

稍晚一点的结果，

在此处输入图像描述

<body>
    <div data-ng-controller="SimpleController">
        Search By Name: <input type="text" data-ng-model="searchTerm" />
        <ul>
            <li data-ng-repeat="cust in customers | filter:searchTerm | orderBy:name">{{cust.name}} - {{cust.city | uppercase}}</li>
        </ul>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
    <script type="text/javascript">
        function SimpleController($scope) {
            $scope.customers = [
                { name: 'John', city: 'Barcelona' },
                { name: 'Scott', city: 'Madrid' },
                { name: 'Jennifer', city: 'Seattle' },
                { name: 'Mike', city: 'Atalanta' }
            ];
        }
    </script>
</body>

我想在加载第二张图片等所有内容后查看结果。

4

1 回答 1

6

You want the ngCloak directive, which keeps Angular templates hidden until your application is ready:

<body>
    <div data-ng-controller="SimpleController">
        Search By Name: <input type="text" data-ng-model="searchTerm" />
        <ul data-ng-cloak>
            <li data-ng-repeat="cust in customers | filter:searchTerm | orderBy:name">{{cust.name}} - {{cust.city | uppercase}}</li>
        </ul>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
    <script type="text/javascript">
        function SimpleController($scope) {
            $scope.customers = [
                { name: 'John', city: 'Barcelona' },
                { name: 'Scott', city: 'Madrid' },
                { name: 'Jennifer', city: 'Seattle' },
                { name: 'Mike', city: 'Atalanta' }
            ];
        }
    </script>
</body>

Edit: This will only have the desired effect if you load Angular in the <head> section of your HTML (or before you use the ngCloak directive). If you still want to load Angular at the end of the document, you need to include this CSS before your templates:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}
于 2013-09-16T13:20:40.907 回答