4

次のようなものを書くと：

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

image.name = nullAngular が最初にタグを追加して src を評価する場合。img/_img.pngブラウザは、存在しないものに対して http リクエストを行います。次に、Angular は ngIf ディレクティブを解析した後にタグを削除します。この問題を解決する最も簡単な方法は何ですか? ngSrc と ngIf の完璧なユースケースだと思いました。

編集

現在の不安定な 1.2.0-rc.2 の問題は修正されており、すべてが想定どおりに機能します。現在の安定版 1.0.8 では、三項演算子を使用することさえできません。

4

2 に答える 2

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>

controller を使用したディレクティブは次のとおりです。

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 に答える