Question

first.html

<html>
<head>
</head>
<body ng-app="store">
 <div ng-controller="StoreController as store">
     <div ng-repeat="product in store.product | orderBy:'-price'">
        <h1>{{product.name}}</h1>
        <h1>{{product.price | currency}}</h1>
        <h1>{{product.description}}</h1>
        <img ng-src="{{product.image}}" />
        <button ng-show="product.canPurchase"> Add to Cart</button>
    <div>   
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

app.js

( function(){

var app=angular.module('store',[]);

app.controller('StoreController',storeFunction);

function storeFunction(){
    this.product=gem;
}

var gem=[{
    name:'Apple 5',
    price :2.95,
    description:'test description 5',
    canPurchase :true,
    image:'quick1.png'
}];

})();

我正在学习AngularJS，我遇到了ng-src和ng-show指令，我不明白为什么ng-src需要表达式来获取值，因为ng-show不需要表达式

ng-src="{{product.image}}"  // working 
ng-src="product.image"      //not working

在

的情况下

ng-show="product.canPurchase"      //working   
ng-show="{{product.canPurchase}}"  // working

plnkr

Answer 1

为什么ng-src

问题是DOM在角度加载之前很多（因为DOM启动角度），所以在角度加载之前没有解析/插值，但是所有的图像标签都准备就绪，系统开始提取它们。此时，您的图片来源为{{product.image}}，它会尝试首先获取，返回错误。

ng-src避免了这种默认行为，并在角度准备好后将src添加到图像中

以及{{}}为什么会讨论

因为以这种方式进行角度工作当第一次加载Angular页面时，页面会在角度框架开始寻找诸如ng-app和ng-controller之类的钩子的地方进行自举。当它知道需要为特定范围/代码块使用哪个模型时，它会开始用表达式值替换所有花括号

这可能会有所帮助。

为什么ng-src需要表达式？

1 个答案: