ngSrc 是在 ngIf 导致不必要的 http 请求之前计算的

ngSrc is computed before ngIf causing unnecessary http request

本文关键字：http 请求 计算 不必要 是在 ngIf ngSrc      更新时间：2023-09-26

当你写这样的东西时：

<img ng-if="image.name != null" ng-src="img/{{ image.name }}_img.png" />

如果image.name = null Angular 将首先添加标签并评估 src。浏览器将发出 http 请求img/_img.png wchich 不存在。然后angular 将在解析 ngIf 指令后删除标签。解决此问题的最简单方法是什么？我认为这是ngSrc和ngIf的完美用例。

编辑

在当前不稳定的 1.2.0-rc.2 中，问题已修复，一切都按预期工作。在当前稳定的 1.0.8 中，您甚至不能使用三元运算符。

您不需要 ng-if 指令。只需在表达式中执行三元运算符测试即可。类似的东西

<img ng-src="{{image.name?('img/'+ image.name +'_img.png'):null}}"/>

它应该有效。查看我的 plunker http://plnkr.co/edit/BWiGdO?p=preview

你可以用一个简单的指令来做到这一点。

这是 HTML ： 

<!DOCTYPE html>
<html ng-app="App">
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body ng-controller="MyCtrl">
    <h1>Hello Plunker!</h1>
    <img ng-directive />
  </body>
</html>

这是控制器的指令：

angular.module('App', [])
  .controller('MyCtrl', function($scope){
     $scope.image = {name: "myName"};
  });
angular.module('App')
  .directive('ngDirective', function($compile){
    return {
      link: function(scope, element, attrs){
        if(scope.image.name != null){
          $compile($(element).attr('ng-src', 'http://lauterry.github.io/slides-prez-angular/img/angularjs.png'))(scope);
        }
      }
    }
  });

这是完整的工作示例： http://plnkr.co/edit/LNgsuX

相关文章：