某些HTML元素为什么需要Angular.JS指令，和别人不一样？ [英] Why do certain html elements need Angular.JS directives, and others don't?

问题描述

我一直在努力通过Angular.JS教程，我在步骤6 。本教程显示以下code片断：

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>

然后它接着解释：

It then goes on to explain:

我们还增加了...指令ngSrc。该指令$ P $从字面上治疗的角度{{EX pression}}标记，并启动到无效URL /app/{{phone.imageUrl}}的请求，而如果我们有它会做pvents浏览器只有指定的属性在常规src属性绑定（）。使用ngSrc指令$ P $从做一个HTTP请求无效的位置pvents浏览器。

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 ，因此它可以正确地分析双大括号内。但他们无法解释为什么 元素不需要相同的特殊指令。

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属性不起作用
  右：浏览器将来自URL抓取的文字文本
  {{哈希}}，直到角替换里面的前pression {{哈希}}。该
  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 指令：

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

采用了棱角分明的标记像{{哈希}}在href属性将使
  链接到错误的URL，如果用户点击它角有一个前
  机会来代替{{哈希}}标记与它的价值。直到角
  替换标记的链接将最有可能打破，将
  返回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 }}">

然而，该URL内的散列可以是一个问题，如果角尚未加载。如果用户试图点击该链接角结合前链路仍字面上是 {{} phone.id} ，而不是实际的限值。

多久，会出现这种情况？那么这取决于需要多长时间你的页面加载。如果你正在解决一个承诺到页面上没有解决途径，那么用户肯定还会有机会点击链接不当

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