Javascript 为什么ng src需要表达式？_Javascript_Angularjs

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

javascript angularjs

Javascript 为什么ng src需要表达式？,javascript,angularjs,Javascript,Angularjs,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>

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>

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

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

在什么情况下

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

为什么要使用ng src

问题是DOM在角度加载之前就加载了（因为DOM启动角度加载），所以在角度加载之前不会进行解析/插值，但所有图像标记都已准备就绪，系统正在开始获取它们。此时，图像的源代码是{{product.image}，它将首先尝试获取它，并返回错误

ng src避免了这种默认行为，并在角度设置就绪后将src添加到图像中

为什么{{}卷发

因为angular在第一次加载angular页面时是以这种方式工作的，当angular框架开始查找钩子（如ng app和ng controller）时，页面将被引导。当它知道某个特定的作用域/代码块需要使用哪个模型时，就会开始用表达式值替换所有的大括号

这可能会有帮助

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