I've been working through the Angular.JS tutorial, and I'm on step 6. The tutorial shows the following code snippet:
我一直在研究角度。JS教程，我在第6步。本教程展示了以下代码片段:
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul>
It then goes on to explain:
它接着解释道:
We also added ... the ngSrc directive. That directive prevents the browser from treating the angular {{ expression }} markup literally, and initiating a request to invalid url /app/{{phone.imageUrl}}, which it would have done if we had only specified an attribute binding in a regular src attribute (). Using the ngSrc directive prevents the browser from making an http request to an invalid location.
我们还增加了…ngSrc指令。该指令阻止浏览器从字面上处理有角的{表达式}标记，并向无效的url /app/{phone发起请求。如果我们只在常规src属性()中指定了属性绑定，那么它就会完成。使用ngSrc指令阻止浏览器向无效的位置发出http请求。
So, what it's saying is, the img element needs to use the special Angular.JS directive ngSrc so it can correctly parse the double curly braces. But they fail to explain why the a element doesn't require the same special directive.
所以，它的意思是，img元素需要使用特殊的角度。JS指令ngSrc可以正确解析双花括号。但是他们没有解释为什么一个元素不需要同样的特殊指令。
<a href="#/phones/{{phone.id}}">
What's going on here? href can correctly parse the double curly braces, but src can't? Why?
这是怎么回事?href可以正确解析双花括号，但是src不能?为什么?
2 个解决方案
#1
8
The AngularJS docs are great place to find this type of information.
AngularJS文档是查找此类信息的好地方。
http://docs.angularjs.org/api/ng/directive/ngSrc
http://docs.angularjs.org/api/ng/directive/ngSrc
Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.
在src属性中使用{{{}}}这样的角标记并不能正常工作:浏览器将使用文本{{{}}从URL获取，直到角将{{{}}}中的表达式替换。ngSrc指令解决了这个问题。
There is actually a ng-href directive:
实际上有一个ng-href指令:
http://docs.angularjs.org/api/ng/directive/ngHref
http://docs.angularjs.org/api/ng/directive/ngHref
Using Angular markup like {{hash}} in an href attribute will make the link go to the wrong URL if the user clicks it before Angular has a chance to replace the {{hash}} markup with its value. Until Angular replaces the markup the link will be broken and will most likely return a 404 error.
在href属性中使用像{{{}}这样的角标记，将使链接转到错误的URL，如果用户在使用角之前单击它，就有机会用其值替换{{{}}标记。在角取代标记之前，链接将被破坏，并且很可能返回404错误。
So essentially what this all means is that if you write a url like this:
本质上，这一切意味着如果你写一个像这样的url:
<a href="#/phones/{{ phone.id }}">
However, the hashes inside the URL can be an issue if Angular hasn't loaded yet. If the user attempts to click that link before Angular binds the link will literally be the {{ phone.id }} rather than the actual bound value.
但是，如果角度还没有加载，URL中的散列可能是一个问题。如果用户试图在角绑定之前单击该链接，那么该链接将是{phone}。而不是实际的绑定值。
How often, does this happen? Well it depends on how long it takes your page to load. If you're resolving a promise onto the page without resolving the route then the user will definitely have a chance to click the improper link.
这种情况多久发生一次?这取决于页面载入的时间。如果你在页面上解析一个承诺而不解析路径，那么用户肯定有机会点击不合适的链接。
Long story short, different directives, same reasoning.
长话短说，不同的指令，相同的推理。
#2
1
To add to David's great answer, the basic difference is that the href doesn't trigger any server calls on page load (because there is no reason to, it's triggered only when you follow the link), while, on the other hand, all image tags are loaded when the page loads, and of course, the server tries to fetch them right away as their path is found in the src attribute.
添加到大卫的好答案,最基本的区别是href不触发任何服务器调用页面加载(因为没有理由,只有当你触发跟踪链接),同时,另一方面,所有图像标记加载页面加载的时候,当然,服务器试图马上取回他们的src属性中发现的路径。
The problem is that the DOM is loaded much before angular is (because DOM initiates angular), so there is no parsing/interpolation taking place before the angular loads, but all the image tags are ready and system is starting to fetch them. At that point, the source for your image is {{phone.imageUrl}} and it will try to fetch that first, returning errors.
问题是，DOM在角是之前就被加载了(因为DOM引发了角)，所以在角负载之前不会进行解析/插补，但是所有的图像标记都准备好了，系统开始获取它们。此时，映像的源是{{phone}。imageUrl}，它将尝试获取第一个返回的错误。
ng-src avoids this default behaviour, and adds the src to the image once the angular is ready.
ng-src避免了这种默认行为，并在角度准备好后将src添加到图像中。
#1
8
The AngularJS docs are great place to find this type of information.
AngularJS文档是查找此类信息的好地方。
http://docs.angularjs.org/api/ng/directive/ngSrc
http://docs.angularjs.org/api/ng/directive/ngSrc
Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.
在src属性中使用{{{}}}这样的角标记并不能正常工作:浏览器将使用文本{{{}}从URL获取，直到角将{{{}}}中的表达式替换。ngSrc指令解决了这个问题。
There is actually a ng-href directive:
实际上有一个ng-href指令:
http://docs.angularjs.org/api/ng/directive/ngHref
http://docs.angularjs.org/api/ng/directive/ngHref
Using Angular markup like {{hash}} in an href attribute will make the link go to the wrong URL if the user clicks it before Angular has a chance to replace the {{hash}} markup with its value. Until Angular replaces the markup the link will be broken and will most likely return a 404 error.
在href属性中使用像{{{}}这样的角标记，将使链接转到错误的URL，如果用户在使用角之前单击它，就有机会用其值替换{{{}}标记。在角取代标记之前，链接将被破坏，并且很可能返回404错误。
So essentially what this all means is that if you write a url like this:
本质上，这一切意味着如果你写一个像这样的url:
<a href="#/phones/{{ phone.id }}">
However, the hashes inside the URL can be an issue if Angular hasn't loaded yet. If the user attempts to click that link before Angular binds the link will literally be the {{ phone.id }} rather than the actual bound value.
但是，如果角度还没有加载，URL中的散列可能是一个问题。如果用户试图在角绑定之前单击该链接，那么该链接将是{phone}。而不是实际的绑定值。
How often, does this happen? Well it depends on how long it takes your page to load. If you're resolving a promise onto the page without resolving the route then the user will definitely have a chance to click the improper link.
这种情况多久发生一次?这取决于页面载入的时间。如果你在页面上解析一个承诺而不解析路径，那么用户肯定有机会点击不合适的链接。
Long story short, different directives, same reasoning.
长话短说，不同的指令，相同的推理。
#2
1
To add to David's great answer, the basic difference is that the href doesn't trigger any server calls on page load (because there is no reason to, it's triggered only when you follow the link), while, on the other hand, all image tags are loaded when the page loads, and of course, the server tries to fetch them right away as their path is found in the src attribute.
添加到大卫的好答案,最基本的区别是href不触发任何服务器调用页面加载(因为没有理由,只有当你触发跟踪链接),同时,另一方面,所有图像标记加载页面加载的时候,当然,服务器试图马上取回他们的src属性中发现的路径。
The problem is that the DOM is loaded much before angular is (because DOM initiates angular), so there is no parsing/interpolation taking place before the angular loads, but all the image tags are ready and system is starting to fetch them. At that point, the source for your image is {{phone.imageUrl}} and it will try to fetch that first, returning errors.
问题是，DOM在角是之前就被加载了(因为DOM引发了角)，所以在角负载之前不会进行解析/插补，但是所有的图像标记都准备好了，系统开始获取它们。此时，映像的源是{{phone}。imageUrl}，它将尝试获取第一个返回的错误。
ng-src avoids this default behaviour, and adds the src to the image once the angular is ready.
ng-src避免了这种默认行为，并在角度准备好后将src添加到图像中。