Question

我正在使用一个看起来像这样的指令将一些html注入到一个角度页面中：

.directive("injected", ['$compile', 'toolsService' , ($compile, toolsService, type) -> 
    scope: true
    link: (scope, element, attrs) ->
      type = attrs.widgetType
      attrs.$observe "template", (template) ->
        if angular.isDefined(template) and !!template
          # compile the provided template against the current scope
          el = $compile(template)(scope)
          # stupid way of emptying the element
          element.html ""
          # add the template content
          element.append el

它运行正常，但问题是编译的html中的图像（即表示应用程序仍在计算页面部分内部的值）是在页面生命周期的后期加载方式。

如果html看起来像这样：

<!-- outside the compiled html -->
<img src="img/yellow-refresh-2.gif">

<!-- the compiled html -->
<div ng-init="data.refreshing = true; data.error = false;">
  <div>{{data.refreshing}}</div>
  <div class="header">
    <h5 class="ib alias ng-binding">This is the title</h5>
    <div class="dataStatus ib right">
      <img ng-hide="data.refreshing == false" src="img/yellow-refresh-2.gif" class="ind refresh ng-hide">
      <img ng-hide="data.refreshing || data.error" class="ind good">
      <img ng-show="data.error" class="ind error ng-hide"></div>
  </div>
</div>

编译后的html外面的img将立即可见，但编译后的html中相同的img在一整秒后可见。事实上，我的代码可以要求数据库在相当大的记录集上进行聚合，并在编译的html中的图像可见之前显示那些结果（在编译的html内部）。

{{data.refreshing}}在页面上可见，并在页面加载时为true。当数据从db调用返回时，我可以看到它切换为false。调用模板编译后，html（{{data.refreshing}}特别是很快就可以看到，而它旁边的图像显示近半秒 - 但页面顶部的相同图像在页面加载。

重要提示：如果这是首页加载（Ctrl F5），则更有可能出现问题。但它不能只是一个加载问题，因为编译的html外面的img在所有实例中都可以立即显示。

如何让编译好的html中的图像更快出现？一旦编译好的html好了，编译后就需要看到它。

使用$ compile时为什么图像需要很长时间才能加载？

0 个答案: