javascript - 使用缓存重新加载时，AngularJS 不会立即评估

Question

我开始使用 AngularJS 并想使用这样的 foreach 循环

<div class="project" ng-hide="loading" ng-repeat="project in projects">
    <a href="projects/[[ project.slug ]]">[[ project.name ]] &raquo;</a>
    <p>{{ trans('project.description') }}: [[ project.description ]]</p>
    <hr>
</div>

此代码正在填充项目变量。

Project.get()
    .success(function(data) {
        $scope.projects = data;
        $scope.loading  = false;
    });

和

get : function() {
        return $http.get('/api/projects');
    },

当我现在导航到该网站时，它可以正常工作。数据得到评估并正常显示。

但是，当我重新加载页面时(Command + R)，我可以在页面上瞬间看到 AngularJS 代码，这意味着用户可以看到 [[ project.name ]] 等而不是评估的代码。什么可能导致这种情况？这是正常行为吗？ ng-hide 最初通过 $scope.loading = true; 设置为 false，该变量在 Project.get( 的 success 方法中设置为 false )

<小时/>

我认为这应该是足够的代码，如果您需要更多，请告诉我，我为您提供完整的代码。

Answer 1

由于存在 ajax 请求，因此您不会立即填充 javascript 对象，因此占位符将出现在此处。

您在这里有一些选择:

• 建议使用ng-bind，而不是使用“{{...}}”
• 使用 ng-cloak 来防止原始 html 模板的简短显示，如文档所示:ngCloak

<小时/>