为什么某些 html 元素需要 Angular.JS 指令，而其他元素不需要? [英] Why do certain html elements need Angular.JS directives, and others don't?

问题描述

我一直在学习 Angular.JS 教程，目前正在第 6 步.本教程展示了以下代码片段:

I've been working through the Angular.JS tutorial, and I'm on step 6. The tutorial shows the following code snippet:

<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>

然后继续解释:

我们还添加了... ngSrc 指令.该指令阻止浏览器从字面上处理 angular {{ expression }} 标记，并向无效 url/app/{{phone.imageUrl}} 发起请求，如果我们只在常规 src 属性 ().使用 ngSrc 指令可防止浏览器向无效位置发出 http 请求.

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.

所以，它的意思是，img 元素需要使用特殊的 Angular.JS 指令 ngSrc 才能正确解析双花括号.但是他们没有解释为什么 a 元素不需要相同的特殊指令.

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.

<a href="#/phones/{{phone.id}}">

这是怎么回事?href 可以正确解析双花括号，但是 src 不能?为什么?

What's going on here? href can correctly parse the double curly braces, but src can't? Why?

推荐答案

AngularJS 文档是查找此类信息的好地方.

The AngularJS docs are great place to find this type of information.

http://docs.angularjs.org/api/ng/directive/ngSrc

在 src 属性中使用像 {{hash}} 这样的 Angular 标记不起作用右:浏览器将从带有文字文本的 URL 中获取{{hash}} 直到 Angular 替换 {{hash}} 中的表达式.这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.

实际上有一个 ng-href 指令:

There is actually a ng-href directive:

http://docs.angularjs.org/api/ng/directive/ngHref

在 href 属性中使用像 {{hash}} 这样的 Angular 标记将使如果用户在 Angular 有一个链接之前点击它，链接会转到错误的 URL有机会用它的值替换 {{hash}} 标记.直到角替换链接将被破坏的标记，并且很可能返回 404 错误.

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.

所以基本上这一切意味着如果你写一个这样的网址:

So essentially what this all means is that if you write a url like this:

<a href="#/phones/{{ phone.id }}">

但是，如果 Angular 尚未加载，则 URL 中的哈希值可能会成为问题.如果用户在 Angular 绑定之前尝试点击该链接，该链接实际上是 {{ 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.

这种情况多久发生一次?嗯，这取决于加载页面需要多长时间.如果您在没有解析路由的情况下将承诺解析到页面上，那么用户肯定有机会点击不正确的链接.

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.

长话短说，不同的指令，相同的推理.

这篇关于为什么某些 html 元素需要 Angular.JS 指令，而其他元素不需要?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！