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

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

javascript angularjs

Javascript 简单角度模型绑定不起作用？,javascript,angularjs,Javascript,Angularjs,这是我的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&g

这是我的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>


{{product.ShortDescription}}
（功能（）{
var app=angular.module（'s'，[]）；
app.controller（'ProductCtrl'，函数（$scope）{
$scope.products=[{“Name”：“专辑名称”，“价格”：0.0，“NewPrice”：0.0，“简短描述”：“好奇可能会无耻地结束解释。真高就说了康先生”，“SKU”：“ProductTypeID”：0，“ImageID”：2，“促销”：“ParentID”：0，“属性”：“图像”：{“路径”：”http://demo.neontheme.com/assets/images/album-thumb-1.jpg，“Id”：2}，“评论”：[]，“Id”：5101}，{“名称”：“专辑名称”，“价格”：0.0，“新价格”：0.0，“简短描述”：“好奇可以无耻地结束解释。真高就说先生来了。”，“SKU”：“ProductTypeID”：0，“ImageID”：2，“促销”：“ParentID”：0，“属性”：“图像”：{“路径”：”http://demo.neontheme.com/assets/images/album-thumb-1.jpg“，”Id“：2}，“评论”：[]，”Id“：5102}，{”Name”：“专辑名称”，“价格”：0.0，“新价格”：0.0，“简短描述”：“好奇可能会无耻地结束解释。真高就说先生来了。”，“SKU”：“ProductTypeID”：0，“ImageID”：2，“促销”：“ParentID”：0，“属性”：“图像”：{“路径”：”http://demo.neontheme.com/assets/images/album-thumb-1.jpg，“Id:2}，”评论“：[]，“Id:5103}，{”姓名“：“专辑标题”，”Price:0.0，“NewPrice:0.0”，ShortDescription:“好奇心可能会无耻地结束解释。真高就说先生来了。”，“SKU:”，“ProductTypeID:0，”ImageID:2，“促销”：“，“ParentID:0，”Attributes:”，“Image:{“路径”：”http://demo.neontheme.com/assets/images/album-thumb-1.jpg“，”Id“：2}，“，”评论“：[]，”Id“：5104}，“{”姓名“：”专辑标题“，”价格“：0.0，”NewPrice“：0.0，”ShortDescription“：“好奇可能会无耻地结束解释。真高就说先生来了。”，“SKU:”，“ProductTypeID:”0，“ImageID:”2，“促销:”，“ParentID:”0，“属性:”，“图像”：{“路径”：”http://demo.neontheme.com/assets/images/album-thumb-1.jpg“，”Id“：2}，“，”评论“：[]，”Id“：5105}，“{”姓名“：”专辑标题“，”价格“：0.0”，“新价格“：0.0，”简短描述“：“好奇可能会无耻地结束解释。真高就说先生来了。”，“SKU:”，“ProductTypeID”：0，“ImageID”：2，“促销”：“，“ParentID”：0，“属性”：“，“图像”：{“路径”：”http://demo.neontheme.com/assets/images/album-thumb-1.jpg“，”Id“：2}，“评论”：[]，”Id“：5106}，{”Name“：”专辑标题“，”价格“：0.0，“新价格“：0.0，”简短描述“：“好奇可能会无耻地结束解释。真高就说先生来了。”，“SKU:”，“ProductTypeID”：0，“ImageID”：2，“促销”：“，“ParentID”：0，“属性”：“，“图像”：{“路径”：”http://demo.neontheme.com/assets/images/album-thumb-1.jpg“，”Id“：2}，“，”评论“：[]，”Id“：5107}，“{”姓名“：”专辑标题“，”价格“：0.0”，“新价格“：0.0，”简短描述“：“好奇可能会无耻地结束解释。真高就说先生来了。”，“SKU:”，“ProductTypeID”：0，“ImageID”：2，“促销”：“，“ParentID”：0，“属性”：“，“图像”：{“路径”：”http://demo.neontheme.com/assets/images/album-thumb-1.jpg“，”Id“：2}，“，”评论“：[]，”Id“：5108}，“{”姓名“：”专辑标题“，”价格“：0.0”，“新价格“：0.0，”简短描述“：“好奇可能会无耻地结束解释。真高就说先生来了。”，“SKU:”，“ProductTypeID”：0，“ImageID”：2，“促销”：“，“ParentID”：0，“属性”：“，“图像”：{“路径”：”http://demo.neontheme.com/assets/images/album-thumb-1.jpg“，”Id“：2}，“评论”：[]，”Id“：5109}，{”Name“：”专辑标题“，”价格“：0.0，“新价格“：0.0，”简短描述“：“好奇可能会无耻地结束解释。真高就说先生来了。”，“SKU:”，“ProductTypeID”：0，“ImageID”：2，“促销”：“，“ParentID”：0，“属性”：“，“图像”：{“路径”：”http://demo.neontheme.com/assets/images/album-thumb-1.jpg“，“Id”：2}，“评论”：[]，“Id”：5110}]
});
}());

在我的控制台里，我得到

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

/%7B%7Bproduct.Image.Path%7D%7D 404（未找到）位于

我没有看到任何东西。Chrome Html选项卡显示了这一点

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

您必须使用ngSrc：

从文档：

在src属性中使用像{{hash}}这样的角度标记是行不通的右图：浏览器将从URL获取文本 {{hash}}直到Angular替换了{{hash}内的表达式 ngSrc指令解决了这个问题

因此：

您必须使用ngSrc：

从文档：

在src属性中使用像{{hash}}这样的角度标记是行不通的右图：浏览器将从URL获取文本 {{hash}}直到Angular替换了{{hash}内的表达式 ngSrc指令解决了这个问题

因此：

1控制器输入错误：

np controller=“ProductCtrl”

-->

ng controller

2 改用ngSrc

1控制器中的打字错误：

np controller=“ProductCtrl”

-->

ng controller

2 改用ngSrc

首先你应该使用

其次，您在

div class=“gallery env”ng app=“s”nP controller=“ProductCtrl”>

首先，你应该使用

其次，您在

div class=“gallery env”ng app=“s”nP controller=“ProductCtrl”>

您是否在img标记处尝试了ng src而不是src？您是否在img标记处尝试了ng src而不是src？data ng src或ng srcdata ng src或ng src

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