详解AngularJS中ng-src指令的使用

前言

在日常开发工作中，有很多需求是在一个页面上显示一些图片。有时，图片的地址路径是由客户端的脚本来设置（它有可能是从数据库中获取的）。

这是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，且已经赋值了。使用模型绑定器，在页面上我使用了这些属性。 对于图片，我使用了 <img> HTML标签 。

然后运行这个示例，效果如下：

然后打开浏览器的控制台，就会看到这个错误。

无法加载资源:服务器响应状态为404 (Not Found)。

那么问题来了，为什么会出现这个错误？应该如何解决？

原因- 当DOM 被解析时，会尝试从服务器获取图片。 这时，src属性上的 Angularjs 绑定表达式 {{ model }}还没有执行，所以就出现了  404 未找到的错误。

解决方案- 解决的版本就是：在图片中使用ng-Src代替src属性，使用这个指令后，请求就只会在Angular执行这个绑定表达式之后才会发出。

使用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原生属性。

总结

以上就是这篇文章的全部内容，希望大家能够喜欢，如果有疑问可以留言交流。

赞 (0)

相关推荐

  • AngularJS指令用法详解

    本文实例讲述了AngularJS指令用法.分享给大家供大家参考,具体如下: 指令(directives)是任何AngularJS应用中最重要的成分.尽管AngularJS已经自带了很多指令,你经常会发现需要自己亲手创建一些特别的指令.本文将会带你了解自定义指令并解释如何在现实世界中的Angular项目中使用它们.文章的最后,我们将一起用Angular指令来创建一个简单的笔记小应用. 综述 一个指令就是一个引入新语法的东西.指令是在DOM元素上做的标记,并同时附加了一些特定的行为.例如,静态的HT

  • AngularJS创建自定义指令的方法详解

    本文实例讲述了AngularJS创建自定义指令的方法.分享给大家供大家参考,具体如下: 这是一篇译文,来自angular开发者说明的指令.主要面向已经熟悉angular开发基础的开发者.这篇文档解释了什么情况下需要创建自己的指令,和如何去创建指令. 什么是指令 从一个高的层面来讲,指令是angular $compile服务的说明,当特定的标签(属性,元素名,或者注释) 出现在DOM中的时候,它让编译器附加指定的行为到DOM上. 这个过程是很简单的.angular内部有很用这样自带的指令,比如说n

  • AngularJS使用自定义指令替代ng-repeat的方法

    前言 大家都知道对于处理小数量,ng-repeat是非常有用的,但是如果需要处理非常大的数量集,还是采用自定义的方法更好一些.特别是数据大多都是静态的或已预存储好的,这个时候应避免使用ng-repeat指令. ng-repeat中的表达式和 $watch Angular中的表达式都会创建$watch 的Scope 函数.用于监听模型变化,当你的模型部分发生变化时它会通知你.在ng-repeat指令中,如果某行数据有15列数据都绑定了表达式,如果数据有1000多行的话,那么$watch就又奖金15

  • AngularJS递归指令实现Tree View效果示例

    AngularJS递归指令实现Tree View效果示例

    本文实例讲述了AngularJS递归指令实现Tree View效果的方法.分享给大家供大家参考,具体如下: 在层次数据结构展示中,树是一种极其常见的展现方式.比如系统中目录结构.企业组织结构.电子商务产品分类都是常见的树形结构数据. 这里我们采用Angular的方式来实现这类常见的tree view结构. 首先我们定义数据结构,采用以children属性来挂接子节点方式来展现树层次结构,示例如下: [ { "id":"1", "pid":&quo

  • AngularJS用户选择器指令实例分析

    本文实例分析了AngularJS用户选择器指令.分享给大家供大家参考,具体如下: 在开发表单时,我们需要使用经常需要使用到用户选择器,用户的数据一般使用如下方式存储: 用户1,用户2,用户3 我们可以使用angular指令实现选择器. <!DOCTYPE html> <html ng-app="app"> <head> <meta charset="UTF-8"> <meta http-equiv="c

  • AngularJS 自定义指令详解及实例代码

    AngularJS 自定义指令详解及实例代码

    AngularJS支持用户自定义标签属性,在不需要使用DOM节点操作的情况下,添加自定义的内容. 前面提到AngularJS的四大特性: 1 MVC 2 模块化 3 指令 4 双向数据绑定 下面将会介绍如下的内容: 1 如何自定义指令 2 自定义指令的使用 3 自定义指令的内嵌使用 如何自定义指令: Angular是基于模块的框架,因此上来肯定要创建一个自己的模块: var myAppModule = angular.module("myApp",[]); 然后在此模块基础上创建指令d

  • AngularJS中关于ng-class指令的几种实现方式详解

    前言 开发中经常会遇到这样的需求,一个元素需要在不同的状态下呈现不同的样子,而在这所谓的的样子当然就是改变其css的属性,而实现动态的改变属性值,我们就需要实现动态的更换其class属性值. 在这给大家介绍三种方法来实现,大家可以根据自己的需求来选择方式,下面来看看. 第一种:通过数据的双向绑定(不推荐) <div ng-controller="firstController"> <div ng-class="{{className}}">&

  • AngularJS中指令的四种基本形式实例分析

    本文实例讲述了AngularJS中指令的四种基本形式.分享给大家供大家参考,具体如下: 指令的四种基本形式中, 注意注释型指令 M 的使用方法是 <!--  directive:指令名称  --> 注意左右俩测必须有空格才会正常识别 所有指令是可以相互组合 的,不写restrict ,将会默认为A属性 指令要支持IE8 浏览器 一般最好将指令设置为属性 <!doctype html> <html ng-app="myapp"> <head>

  • AngularJS封装指令方法详解

    本文实例讲述了AngularJS封装指令方法.分享给大家供大家参考,具体如下: 引言:angularjs是一个中等重量级的前端开发框架 HTML是一门很好的为静态文本设计的语言,但要构建动态的web应用它就显的乏力了.通常,我们使用以下技术来解决静态网页技术在构建动态应用上的不足: 1.类库:类库是一类函数的集合,它能帮助你写web应用.这里起主导作用是你的代码,由你来决定何时使用类库.典型的类库,例如prototype.jQuery等. 2.框架:框架式一种特殊的.已经实现的web应用,你只需

  • 浅谈AngularJs指令之scope属性详解

    AngularJS使用directive()方法类定义一个指令: .directive("name",function(){ return{ }; }) 上面是定义一个指令的主体框架,该方法接受两个参数: 1.第一个参数:name表示定义的指令的名称(angularjs会用这个name注册这个指令) 2.第二个参数:函数,该番薯必须返回一个对象或者一个函数,但通常我们会返回一个对象.return后接的就是返回的对象. 在返回的对象中有一个scope属性,这个属性用来修饰指令的作用域.

随机推荐