Question

我正在研究Angular.js和Require.js。我在这里使用这两个时遇到了一个问题。例如在我的html中，我有一些非常简单的东西，如{{3 + 3}}。我发现这只会在加载完所有内容后的几秒内进行评估。用户可以清楚地看到整个过程。但这对我不利。我不想在这里拖延。有人可以解释为什么会这样吗？这是因为我在做手动引导程序。

这是我的main.js for require和我的引导代码。

require.config({
  paths: {
    jquery: 'lib/jquery/jquery-1.9.1.min',
    bootstrap: 'lib/bootstrap/bootstrap.min',
    angular: 'lib/angular/angular.min'
  },
  baseUrl: '/Scripts',
  shim: {
    'angular': { 'exports': 'angular' },
    'bootstrap': { deps: ['jquery'] }
  },
  priority: [
    'angular'
  ]
});

require(['angular', 'app/admin/app.admin', 'app/admin/app.admin.routes', 'app/admin/index/index', 'app/admin/app.admin.directives'], function (angular, app) {
  'use strict';
  angular.element(document).ready(function () {
    angular.bootstrap(document, ['app.admin']);
  });
});

干杯

Answer 1

在引导角度之前，当您在require.js中加载一些依赖项时，用户必须等待所有这些文件在应用程序启动之前完全加载。而且因为HTML首先在脚本之前加载，所以原始内容会在一段时间内对用户可见。

如果您不希望用户在使用角度处理HTML元素之前查看HTML元素的内容，请使用专为此设置的ngCloak指令。请查看文档的此条目：http://docs.angularjs.org/api/ng.directive:ngCloak。该指令设置元素的样式，使其最初隐藏，当角度bootstraps和完成处理时，HTML元素的样式被设置回可见，因此只显示已编译的HTML。

<强>更新

但由于上述解决方案在您的情况下不会立即起作用（因为角度库脚本必须在模板主体之前加载 - 包含在文档的head中），因此您还应该包含以下样式：您文档的head部分：

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak
{
    display: none;
}

这是加载后页面样式附加的角度。

另一种解决方案是不将{{ }}绑定直接插入到元素的主体内，而是使用ng-bind，ng-bind-template和ng-bind-html-unsafe指令。你可以在这里找到他们的描述：

http://docs.angularjs.org/api/ng.directive:ngBind http://docs.angularjs.org/api/ng.directive:ngBindTemplate http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe

Angular.js和Require.Js

1 个答案: