Question

这是我的html和脚本，

<div class="gallery-env" ng-app="s" np-controller="ProductCtrl">
    <div class="row" ng-repeat="product in products">
        <div class="col-sm-4">
            <article class="album">
                <header>
                    <a href="extra-gallery-single.html">
                        <img src="{{product.Image.Path}}" />
                    </a>
                    <a href="#" class="album-options">
                        <i class="entypo-cog"></i>
                        Change Cover
                    </a>
                </header>
                <section class="album-info">
                    <h3><a href="extra-gallery-single.html">{{product.Name}}</a></h3>
                    <p>{{product.ShortDescription}}</p>
                </section>
            </article>
        </div>
    </div>
</div>
<script src="/Scripts/angular.1.3.0-beta.5.min.js"></script>
<script>
    (function() {
        var app = angular.module('s', []);
        app.controller('ProductCtrl', function($scope) {
            $scope.products = [{"Name":"Album Title","Price":0.0,"NewPrice":0.0,"ShortDescription":"Can curiosity may end shameless explained. True high on said mr on come.","SKU":"","ProductTypeID":0,"ImageID":2,"Promotion":"","ParentID":0,"Attributes":"","Image":{"Path":"http://demo.neontheme.com/assets/images/album-thumb-1.jpg","Id":2},"Reviews":[],"Id":5101},{"Name":"Album Title","Price":0.0,"NewPrice":0.0,"ShortDescription":"Can curiosity may end shameless explained. True high on said mr on come.","SKU":"","ProductTypeID":0,"ImageID":2,"Promotion":"","ParentID":0,"Attributes":"","Image":{"Path":"http://demo.neontheme.com/assets/images/album-thumb-1.jpg","Id":2},"Reviews":[],"Id":5102},{"Name":"Album Title","Price":0.0,"NewPrice":0.0,"ShortDescription":"Can curiosity may end shameless explained. True high on said mr on come.","SKU":"","ProductTypeID":0,"ImageID":2,"Promotion":"","ParentID":0,"Attributes":"","Image":{"Path":"http://demo.neontheme.com/assets/images/album-thumb-1.jpg","Id":2},"Reviews":[],"Id":5103},{"Name":"Album Title","Price":0.0,"NewPrice":0.0,"ShortDescription":"Can curiosity may end shameless explained. True high on said mr on come.","SKU":"","ProductTypeID":0,"ImageID":2,"Promotion":"","ParentID":0,"Attributes":"","Image":{"Path":"http://demo.neontheme.com/assets/images/album-thumb-1.jpg","Id":2},"Reviews":[],"Id":5104},{"Name":"Album Title","Price":0.0,"NewPrice":0.0,"ShortDescription":"Can curiosity may end shameless explained. True high on said mr on come.","SKU":"","ProductTypeID":0,"ImageID":2,"Promotion":"","ParentID":0,"Attributes":"","Image":{"Path":"http://demo.neontheme.com/assets/images/album-thumb-1.jpg","Id":2},"Reviews":[],"Id":5105},{"Name":"Album Title","Price":0.0,"NewPrice":0.0,"ShortDescription":"Can curiosity may end shameless explained. True high on said mr on come.","SKU":"","ProductTypeID":0,"ImageID":2,"Promotion":"","ParentID":0,"Attributes":"","Image":{"Path":"http://demo.neontheme.com/assets/images/album-thumb-1.jpg","Id":2},"Reviews":[],"Id":5106},{"Name":"Album Title","Price":0.0,"NewPrice":0.0,"ShortDescription":"Can curiosity may end shameless explained. True high on said mr on come.","SKU":"","ProductTypeID":0,"ImageID":2,"Promotion":"","ParentID":0,"Attributes":"","Image":{"Path":"http://demo.neontheme.com/assets/images/album-thumb-1.jpg","Id":2},"Reviews":[],"Id":5107},{"Name":"Album Title","Price":0.0,"NewPrice":0.0,"ShortDescription":"Can curiosity may end shameless explained. True high on said mr on come.","SKU":"","ProductTypeID":0,"ImageID":2,"Promotion":"","ParentID":0,"Attributes":"","Image":{"Path":"http://demo.neontheme.com/assets/images/album-thumb-1.jpg","Id":2},"Reviews":[],"Id":5108},{"Name":"Album Title","Price":0.0,"NewPrice":0.0,"ShortDescription":"Can curiosity may end shameless explained. True high on said mr on come.","SKU":"","ProductTypeID":0,"ImageID":2,"Promotion":"","ParentID":0,"Attributes":"","Image":{"Path":"http://demo.neontheme.com/assets/images/album-thumb-1.jpg","Id":2},"Reviews":[],"Id":5109},{"Name":"Album Title","Price":0.0,"NewPrice":0.0,"ShortDescription":"Can curiosity may end shameless explained. True high on said mr on come.","SKU":"","ProductTypeID":0,"ImageID":2,"Promotion":"","ParentID":0,"Attributes":"","Image":{"Path":"http://demo.neontheme.com/assets/images/album-thumb-1.jpg","Id":2},"Reviews":[],"Id":5110}]
        });
    }());
</script>

在我的控制台中，我得到了，

/%7B%7Bproduct.Image.Path%7D%7D 404 (Not Found) at <img src="{{product.Image.Path}}" />

我什么都没看到。 Chrome Html标签向我显示了这个，

<div class="gallery-env ng-scope" ng-app="s" np-controller="ProductCtrl">
    <!-- ngRepeat: product in products -->
</div>

Answer 1

你必须使用ngSrc：

http://docs.angularjs.org/api/ng/directive/ngSrc

来自doc：

在src属性中使用像{{hash}}这样的Angular标记并不起作用右：浏览器将使用文字文本从URL中获取 {{hash}}直到Angular替换{{hash}}中的表达式。该 ngSrc指令解决了这个问题。

这样：

<img data-ng-src="{{product.Image.Path}}" />

Answer 2

1 控制器错字：

np-controller="ProductCtrl" - ＆gt; ng-controller

<强> 2 请改用 ngSrc

<img data-ng-src="{{product.Image.Path}}" />

Answer 3

首先，您应该使用<img ng-src='...'>

其次你在div class="gallery-env" ng-app="s" nP-controller="ProductCtrl">

中输错了

jsfiddle

简单的角度模型绑定不起作用？

3 个答案: