AngularJS入门教程06：链接与图片模板AngularJS中文社区.docVIP

AngularJS  入门教程  06：链接与图片模板 区  AngularJS  中文社 这一步，你会为手机列表的手机增添缩略图以及一些链 接，可是这些链接还不会起作用。接下来你会使用这些链接 来分类显示手机的额外信息。 请重置工作目录： git checkout -f step-6 此刻你应当能够看到列表里面手机的图 片和链接了。 步骤 5 和步骤 6 之间最重要的不一样在下边列出。你能够在 GitHub 里看到完好的差异。 数据 注意到此刻 phones.json 文件包括了独一表记符和每一部手机的图像链接。这些 url 此刻指向 app/img/phones/目录。 （样例片段） [ { ... id: motorola-defy-with-motoblur, imageUrl: img/phones/motorola-defy-with-motoblur.0.jpg, name: Motorola DEFY\u2122 with MOTOBLUR\u2122, ... }, ... ]模板 ... {{}} {{phone.snippet}} ...这些链接未来会指向每一部电话的详尽信息页。可是此刻 为了产生这些链接， 我们在 href 属性里面使用我们早已熟习 的双括号数据绑定。在步骤 2，我们增添了 {{}} 绑定作为元素内容。在这一步，我们在元素属性中使用 {{phone.id}}  绑定。 我们相同为每条记录增添手机图片，只要要使用  ngSrc  指令 取代的 src 属性标签就能够了。 假如我们只是用一个正常 src 属性来进行绑定（） ，阅读器会把 AngularJS 的{{ 表达式 }} 标志直接进行字面解说，而且倡始一个向非法 urlhttp://localhost:8000/app/{{phone.imageUrl}} 的恳求。因为 阅读器载入页面时，同时也会恳求载入图片， AngularJS 在 页面载入完成时才开始编译——阅读器恳求载入图片刻 {{phone.imageUrl}} 还没获得编译！ 有了这个 ngSrc 指令会避 免产生这类状况，使用 ngSrc 指令防备阅读器产生一个指向 非法地点的恳求。 测试 ... it(should render phone specific links, function() { input(query).enter(nexus); element(.phones li a).click(); expect(browser().location().url()).toBe(/phones/nexus-s); }); ...我们增添了一个新的端到端测试来考证应用为手机视图产 生了正确的链接，上边就是我们的实现。 你此刻能够刷新你的阅读器，而且用端到端测试器来察看测 试的运转，或许你能够在 AngularJS 服务器上运转它们。 练习 将 ng-src 指令换成一般的 src 属性。用像 Firebug ，Chrome Web Inspector 这样的工具，或许直接去看服务器的接见日记，你 会发现你的应用向 /app/%7B%7Bphone.imageUrl%7D%7D （或许 /app/{{phone.imageUrl}} ）发送了一个非法恳求。 这个问题是因为阅读器会在碰到 img 标签的时候马上向还未 获得编译的 URL 地点发送一个恳求， AngularJS 只有在页面 载入完成后才开始编译表达式进而获得正确的图片 URL 地 址。 总结 此刻你已经增添了手机图片和链接，转到步骤 7，我们将学 习 AngularJS 的布局模板以及 AngularJS 是怎样轻易地为应用供给多重视图。