这里有新鲜出炉的 AngularJS Tutorial 中文版,程序狗速度看过来!
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
这篇文章给大家详细介绍了 AngularJS 中 ng-src 指令的使用,对大家学习 AngularJS 具有一定参考价值,有需要的朋友们可以参考借鉴。
前言
在日常开发工作中,有很多需求是在一个页面上显示一些图片。有时,图片的地址路径是由客户端的脚本来设置(它有可能是从数据库中获取的)。
这是 Angularjs 的时代,当我们想使用 Angularjs 来实现在页面中展示图片,我们会简单使用:
- <img src="path of image">.
如果我们只考虑展示,毫无疑问它没问题,但是在浏览器的控制台中会显示一个 404 (not found) 错误。
为了解决这个问题,我们需要使用
。在使用
- ng-Src
之前,我想给你重现一下这个错误是如何产生的
- ng-Src
示例代码如下:
示例源码
Script.js
- var testApp = angular
- .module("testModule", [])
- .controller("testController", function ($scope) {
- var animal = {
- name: "CAT",
- color: "White",
- picture: "/images/cat.jpg",
- };
- $scope.animal = animal;
- });
Index.html
- <html ng-app="testModule">
- <head>
- <title>
- </title>
- <script src="scripts/angular.min.js">
- </script>
- <script src="scripts/js/script.js">
- </script>
- </head>
- <body>
- <div ng-controller="testController">
- Name: {{animal.name}}
- <br />
- Color: {{animal.color}}
- <br />
- <img src="{{animal.picture}}" />
- </div>
- </body>
- </html>
在上述例子 中,有一个
类,它拥有三个属性:
- animal
,
- Name
和
- Color
,且已经赋值了。使用模型绑定器,在页面上我使用了这些属性。 对于图片,我使用了
- Picture
HTML 标签 。
- <img>
然后运行这个示例,效果如下:
然后打开浏览器的控制台,就会看到这个错误。
无法加载资源: 服务器响应状态为 404 (Not Found)。
那么问题来了,为什么会出现这个错误?应该如何解决?
原因 - 当 DOM 被解析时,会尝试从服务器获取图片。 这时,
属性上的 Angularjs 绑定表达式
- src
还没有执行,所以就出现了 404 未找到的错误。
- {{ model }}
解决方案 - 解决的版本就是:在图片中使用
代替
- ng-Src
属性,使用这个指令后,请求就只会在 Angular 执行这个绑定表达式之后才会发出。
- src
使用 ng-Src 的示例如下:
- <html ng-app="testModule">
- <head>
- <title>
- </title>
- <script src="scripts/angular.min.js">
- </script>
- <script src="scripts/js/script.js">
- </script>
- </head>
- <body>
- <div ng-controller="testController">
- Name: {{animal.name}}
- <br />
- Color: {{animal.color}}
- <br />
- <img ng-src="{{animal.picture}}" />
- </div>
- </body>
- </html>
现在你再打开浏览器的控制台,就不会出现:404 未找到, 这是因为使用了
。
- ng-Src
定义
这个指令覆盖了
- ng-Src-
元素的
- <img />
原生属性。
- src
总结
来源: http://www.phperz.com/article/17/0627/332027.html