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

有时使用插值{{}}不会评估＆amp;更新属性值（最常见的是在IE中发生）。执行此操作的方法是使用带有插值ng-src的{{1}}指令，这会在评估插值指令后将{{}}添加到src标记。

<强>标记

img

<强>替代

另一种方法是使用<div class="media-left"> <img class="media-object" ng-src="{{'images/'+product.image}}"/>  </div>指令，将ng-attr与评估attribute相加。这将确保您每次将插值分配给value中提到的attribute时（ng-attr之后的部分被视为要添加的属性，假设我们有ng-attr然后angular将评估ng-attr-value="{{someVar}}"，然后将该值赋给该元素的value属性。

<强>标记

someVar

AngularJS表达式在ng-src中使用JSF

1 个答案: