4

当你写这样的东西时：

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

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

编辑

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

4

2 回答 2

14

你不需要这个ng-if指令。只需在您的表达式中进行三元运算符测试。就像是

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

它应该可以工作。请参阅我的 plunker http://plnkr.co/edit/BWiGdO?p=preview

于 2013-09-18T16:03:30.667 回答
2

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

这是 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

于 2013-09-18T15:40:10.777 回答