AngularJS表达式在JSF的ng-src中不能正确工作

Question

angularjs模块。 products数组包含2个产品对象，这些产品对象将作为控制器的属性添加。

(function() { 
    var app = angular.module('myApp', []); 
    var products = [ 
     { 
     title: "Dummy Title 1", 
     description: "Dummy Description 1", 
     image: "dummy_image_1.jpg" 
     }, 
     { 
      title: "Dummy Title 2", 
      description: "Dummy Description 2", 
      image: "dummy_image_2.jpg" 
     } 
    ]; 


    app.controller('myController', function() { 
     this.products = products; 
    }); 
})(); 

JSF页面，如果删除images/{{product.image}}与实际的图像文件名，如images/dummy_image_1.jpg，图像被显示，但如果使用angularjs表达代替，然后被示出什么。请注意，循环中的其他表达式除{{product.image}}之外的其他表达式。如果我在其他地方添加{{product.image}}，那么它会正确显示文件名，但在ng-srs中使用，如果我查看html，则不会打印任何内容。我不知道它为什么。

<h:form> 
     <div class="container" ng-controller="myController as controller"> 
      <div class="row"> 
       <div class="col-sm-offset-10"> 
        Hello&#160;<b><h:outputText value="#{user.userName}"/></b><br/> 
        <h:commandLink action="cart" value="Cart"/> 
       </div> 
      </div> 
      <hr/> 

      <div ng-repeat="product in controller.products"> 
       <div class="row"> 
        <div class="media"> 
         <div class="media-left"> 
          <img class="media-object" ng-src="images/{{product.image}}"/> <!--If I replace that expression with a the image file name, it shows the image --> 
         </div> 
         <div class="media-body"> 
          <h4 class="media-heading">{{product.title}}</h4> 
          <span class="caption">{{product.description}}</span><br/> 
          <h:commandLink action="cart" value="Add to cart"/> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </h:form> 

Answer 1

有时使用插值{{}}不会评价属性的&更新值（通常这种情况发生在IE）。这样做的方法是使用ng-src指令插值{{}}这将在评估插值指令后将src添加到img标记。

标记

<div class="media-left"> 
    <img class="media-object" ng-src="{{'images/'+product.image}}"/> 
    <!--If I replace that expression with a the image file name, it shows the image --> 
</div> 

替代

的另一种方法将使用ng-attr指令，它与评价value添加attribute。这将确保您每次插入的值已被分配到ng-attr中提到的attribute（ng-attr后面的部分被认为是要添加的属性，假设我们有ng-attr-value="{{someVar}}"，那么角度将评估someVar，然后将该值分配给值属性表示元件上。

标记

<div class="media-left"> 
    <img class="media-object" ng-attr-src="{{'images/'+product.image}}"/> 
    <!--If I replace that expression with a the image file name, it shows the image --> 
</div>