javascript - 简单的 Angular 模型绑定(bind)不起作用？

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

1 Controller 中的拼写错误:

np-controller="ProductCtrl" --> ng-controller

2使用 ngSrc 代替

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