angularJs 一些API

2023-11-06

angular.bind

返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能。

格式:angular.bind(self,fn,args);

self:object  对象; fn的上下文对象,在fn中可以用this调用

fn:function; 绑定的方法

args:传入fn的参数

使用代码: 

var obj = { name: "Any" };
var fn = function (Adj) {
      console.log(this.name + "is a boy!!! And he is " + Adj + " !!!");
   };
var f = angular.bind(obj, fn, "handsome");
f();//Any is a boy!!! And he is handsome!!!
var t = angular.bind(obj, fn);
t("ugly");// Any is a boy!!! And he is ugly!!!

bind顾名思义绑定的意思,那么假如我们要把A绑到B上,那么必须又有绑定的东西和被绑定的东西。这里需要的就一个对象和一个函数。那么怎么绑?本兽的理解是把对象“绑”到函数的this上去执行,这时候fn的this就等于obj了,至于第三个参数,可有可无,看需求,如果函数需要传入参数,那么我们可以把angular.bind的第三个参数放上去,这就是传入fn函数的参数了。

案例中第一种写法是定义绑定的时候就把fn所需的参数传进去了,调用的时候直接用,而案例中第二种写法是先绑定,在调用执行的时候再给fn传参,效果是一样的...


angular.copy

描述:

复制一个对象或者一个数组(好吧,万物皆对象,数组也是一个对象)。
如果省略了destination,一个新的对象或数组将会被创建出来;
如果提供了destination,则source对象中的所有元素和属性都会被复制到destination中;
如果source不是对象或数组(例如是null或undefined), 则返回source;
如果source和destination类型不一致,则会抛出异常。
注意:这个是单纯复制覆盖,不是类似继承

使用方法:

angular.copy(source, [destination]);

source *   任何类型 也可以是null或者undefined

destination object||array copy去的目的地. 可以省略, 如果不省略, 其必须和source是同类

angular.equals


描述:

比较两个值或者两个对象是不是相等。还支持值的类型,正则表达式和数组的比较。两个值或对象被认为是相等的前提条件是以下的情况至少能满足一项:

  • 两个值或者对象能通过=== (恒等) 的比较
  • 两个值或者对象是同样类型,并且他们的属性都能通过angular.equals的比较
  • 两个值都是NaN
  • 两个值代表两个同样的正则表达式,例如angular.equals('/abc/', '/abc/')
在属性的比较中,以$开头的属性或函数将被忽略,不做比较。 Scope和DOM对象的比较都是通过===(恒等)来鉴别的。

使用方法:

angular.equals(o1, o2)  

angular.forEach


描述:

循环对obj对象的每个元素调用iterator, obj对象可以是一个Object或一个Array. Iterator函数调用方法: iterator(value, key), 其中obj是被迭代对象,key是obj的property key或者是数组的index,value就是相应的值.context


使用方法:

angular.forEach(obj, iterator, [context])


参数:

参数名称 参数类型 描述
obj Object||array 被迭代的对象
iterator function 迭代函数
context (optional) Object Object to become context (this) for the iterator function.

返回值:

对obj的引用

var values = {name: 'misko', gender: 'male'};
var log = [];
angular.forEach(values, function(value, key) {
  this.push(key + ': ' + value);
}, log);
$scope.dd = log.join(",");


angular.fromJson


描述:

把Json字符串转为对象


使用方法:

angular.fromJson(json);


参数:

参数名称 参数类型 描述
json string JSON 字符串

返回值:

对象, 数组, 字符串 或者是一个数字

  1. <!DOCTYPE html>  
  2. <html ng-app="App">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title></title>  
  6.   
  7.     <script src="../js/angular.js"></script>  
  8.     <script type="text/javascript">  
  9.         angular.module("App", [])  
  10.                 .controller("parseController", function($scope)  
  11.                 {  
  12.                     $scope.parse = function()  
  13.                     {  
  14.                         var json = '{"name":"liSi", "password":"321"}';  
  15.                         var jsonArr = '[{"name":"zhangSan", "password":"123"},{"name":"liSi", "password":"321"}]';  
  16.   
  17.                         var obj = angular.fromJson(json);  
  18.                         console.log(obj.name);  
  19.   
  20.                         var objArr = angular.fromJson(jsonArr);  
  21.                         console.log(objArr[0].name);  
  22.                         console.log(objArr[1].password);  
  23.                     }  
  24.   
  25.   
  26.                 });  
  27.     </script>  
  28. </head>  
  29. <body>  
  30.   
  31. <div ng-controller="parseController">  
  32.   
  33.     <button ng-click="parse()">点击我!</button>  
  34.   
  35. </div>  
  36. </body>  
  37. </html> 
相应地,能够从Json到对象,就能够从对象到Json:
  1. var obj =  
  2. {  
  3.    name:"liSi", password:"321"  
  4. }  
  5.   
  6.    var str = angular.toJson(obj, true);  
  7.    console.log(str);


angular.identity

函数返回本身的第一个参数。这个函数一般用于函数风格。

格式:angular.identity()   

使用代码:

  (function () {
    angular.module("Demo", [])
    .controller("testCtrl", testCtrl);
    function testCtrl() {
         var getResult = function (fn, val) {
          return (fn || angular.identity)(val);
      };
      var result = getResult(function (n) { return n * 2; }, 3); //  result = 6
      var null_result = getResult(null, 3);//  null_result = 3
      var undefined_result = getResult(undefined, 3);// undefined _result = 3
    };
  }())

angular.noop

一个不执行任何操作的空函数。这个函数一般用于函数风格。

格式:angular.noop();

贴代码:

  (function () {
    angular.module("Demo", [])
    .controller("testCtrl", testCtrl);
    function testCtrl() {
      var _console = function (v) {
          return v * 2;
      };
      var getResult = function (fn, val) {
          return (fn || angular.noop)(val);
      };
      var firstResult = getResult(_console, 3);//6
      var secondResult = getResult(null, 3);//undefined
      var thirdResult = getResult(undefined, 3);// undefined
    };
  }())
总的来说呢,这两个方法都是用来写函数的时候用的,根据上面写的demo的代码及运行结果来看,感觉他们的作用是用来防止函数传入的是null或者undefined或者其他不能操作的对象。因为如果去掉这两个后,你在函数调用的时候传入null/undefined/或者其他不能执行的对象,那么控制台是直接报错的..


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

angularJs 一些API 的相关文章

随机推荐

  • Linux系统的镜像文件iso下载地址

    打开如下地址 http archive kernel org centos vault 6 1 isos x86 64 然后选择 CentOS 6 1 x86 64 bin DVD1 iso 即可下载
  • 【华为OD机试真题 python】 字符串比较【2022 Q4

    前言 华为OD笔试真题 python 专栏含华为OD机试真题 华为面试题 牛客网华为专栏真题 如果您正在准备华为的面试 或者华为od的机会 有任何想了解的可以私信我进行交流 我会尽可能的给一些建议 和帮您解答 PS 文中答案仅供参考 不能照
  • Visio图片加全边框

    Visio插入图片 想给每一个图都加边框 一个方法是画矩形框 如果是很多图片的话很麻烦 另一个方法 选中图片 然后选 线条 但是发现只围一半 调整线条宽度 欧了
  • 转:Oracle RAC:生产环境下的搭建过程

    原帖 http tech it168 com a2012 0928 1404 000001404498 shtml Oracle RAC 生产环境下的搭建过程 2012年09月29日00 05 it168网站原创 作者 刘炳林 编辑 王玉圆
  • python语言控制结构是指_python程序的三种控制结构

    程序的三种控制结构 什么是控制结构 程序有三种基本结构组成 顺序结构 分支结构 循环结构 任何程序都是由这三种基本结构组成 顺序结构是程序按照线性顺序依次执行的一种运行方式 分支结构是程序根据条件判断结果而选择不同向前执行路径的一种运行方式
  • vue3 子组件向父组件传递参数

    1 父传子 父组件 在子组件上通过 v bind绑定属性 子组件 先定义下基本类型 然后通过setup的第一个参数取获取传过来的值 2 子传父 父组件 在子组件上绑定一个事件 并定义回调 子组件 通过setup的第二个参数去接受 第二个参数
  • 【Qt学习】08:文件读写操作

    OVERVIEW 文件读写操作 一 文件操作 1 QFile 2 QFileInfo 二 二进制文件读写 三 文本文件读写 文件读写操作 文件操作是应用程序必不可少的部分 Qt 作为一个通用开发库提供了跨平台的文件操作能力 Qt 通过QIO
  • 重试实现高可用方案

    typora copy images to img 重试实现高可用一览 1 背景介绍 随着互联网的发展项目中的业务功能越来越复杂 有一些基础服务我们不可避免的会去调用一些第三方的接口或者公司内其他项目中提供的服务 但是远程服务的健壮性和网络
  • 快速入手SpringMVC 之 JSR303与拦截器

    目录 一 JSR303 简介 导入所需依赖 pom依赖 后台 实体类 前端界面 实现结果 JSR303服务端总结 二 拦截器 1 什么是拦截器 2 拦截器与过滤器 2 1 什么是过滤器 Filter 2 2 拦截器与过滤器的区别 3 应用场
  • 三角函数和反三角函数的图形

    三角函数和反三角函数的图形 三角函数和反三角函数的图形 三角函数 反三角函数 三角函数和反三角函数的图形 三角函数 反三角函数
  • 搭建OpenWrt开发环境(包括编译过程)

    转 搭建OpenWrt开发环境 包括编译过程 OpenWrt是一个高度模块化 高度自动化的嵌入式linux发行版 其编译和安装过程比普通的linux发行版而言 要简单太多了 如果您是新手 您那恐惧的心大可放到肚子里 呵呵 对于新手来说最麻烦
  • DOM0 DOM2、DOM3详细介绍与区别

    1 定义 1 1 0级DOM DOM0 0级 DOM 分为2个 一是在标签内写onclick事件 二是在JS写onlicke function 函数 1
  • rabbitmq如何保证消息不丢失_RabbitMQ如何保证不丢数据?Spring Boot实现confirm机制...

    点关注 不迷路 持续更新Java相关技术及资讯 1 原理图 消息确认 说明 ACK是默认是自动 在消息发送给消费者后立即确认 所以若消费端消费业务逻辑抛出异常 会可能丢失消息 即便加入事务回滚了也只保证数据的一致性 而消息依然丢失 所以 若
  • Ubuntu18.04日常踩坑:桌面卡死解决

    方法更新2019 4 11 环境 Ubuntu18 04 发现Ubuntu18 04LTS的桌面经常被卡死 操作毫无反应 此时电脑的内存已经饱满 交换区也已经饱满 等待电脑反应过来 能给你一次关闭进程刷新页面的机会几乎是不存在的 而且此时想
  • 【Flutter 1-7】Flutter教程Dart语言——变量

    作者 弗拉德 来源 弗拉德 公众号 fulade me 2011年10月10日的GOTO大会上 谷歌的两位工程师发布了 Dart Dart是一种全新的编程语言 旨在帮助开发者构建Web应用程序 Dart 1 0于2013年11月14日发布
  • FreeBSD ssh配置

    freebsd ssh配置 2011 08 22 15 35 32 分类 系统运维 freebsd 默认是不允许ssh登录的 说以说要设置一下 我的版本是8 2的从网上的一个博客中获得了信息然后成功了 http likuan4168 blo
  • K8s pod 应用

    个人学习笔记 如有问题欢迎交流 文章编排和格式等问题见谅 1 编写 pod yaml 文件 pod 是 kubernetes 中最小的编排单位 一个 pod 里包含一个或多个容器 apiVersion v1 指定api版本 kind Pod
  • 数据可视化——简单图形绘制(饼图,柱状图,直方图,散点图,箱线图,折线图)

    各种图形的label参数都与plt legend函数配合使用 import pandas as pd import numpy as np import matplotlib pyplot as plt 更改文件存放提取路径 import
  • pjsip视频通信开发(底层实现)之用户注册

    一 PJSIP简介 对于pjsip的介绍可以看http www cnblogs com my life articles 2175462 html 文章 里面详细介绍了它的组成框架以及各部份的组成介绍 我把官网中提供的一个pjsip的整体框
  • angularJs 一些API

    angular bind 返回一个调用self的函数fn self代表fn里的this 可以给fn提供参数args 这个功能也被称为局部操作 以区别功能 格式 angular bind self fn args self object 对象