angular指令心得(ng-model)

2023-11-09

angular指令心得(ng-model)

在项目中编写指令,常常会依赖其他的指令来实现想要达到的功能,其中最常用到的便是ng-model,它为我们明确了需要绑定的属性,虽然在指令中可以通过通过使用独立作用域的”=”来进行双向绑定,但使用ng-model更能简化指令的传值,符合angular的使用习惯。


指令依赖

angular中编写自定义指令是通过require属性来指定查找依赖指令的controller,并传入link函数中进行调用.

.directive("...",function(){
    return {
        ...
        require:'ngModel',
        link:function(scope,elem,attr,ngModelCtr){
            ...
        }
        ...
    }
})

所依赖指令的控制器被传入link的第四个参数中,可以依赖多个指令,此时第四个参数则是个数组。

.directive("...",function(){
    return {
        ...
        require:['ngModel','^?form',...],
        link:function(scope,elem,attr,ctrls){
            ...
        }
        ...
    }
})

在查找指令的过程中,如果未找到指令,则会抛出一个编译错误。
可以通过加前缀来控制其查找的操作。

前缀 作用
^ 向上查找指令,未找到则报错。
? 未找到,取消报错,将null传到link的第四个参数。

ng-model

使用ng-model前,让我们先简单了解一下ng-model的工作原理。

angular是一个mvvm的框架,其主要就体现在ng-model身上
这里写图片描述
angular将model和view之间的联系切断,自己内部通过ng-model去实现ViewModel层,具体的细节不表,我们就看下我们要用的部分。

这里写图片描述

在每个使用ng-model的地方,都会创建一个ngModelController实例,这个实例负责管理存储在模型(由model指定)中的值与元素显示值之间的数据绑定。

ngModelController包含有$formatters和$parsers数组,会在每次更新数据绑定是调用。

当我们从页面或通过$setViewValue改变绑定的属性时,会遍历执行$parsers数组里面的方法,而当我们直接在js里面通过赋值语句修改时,则会调用$formatters数组。

// line number:25332
// model -> value
  // Note: we cannot use a normal scope.$watch as we want to detect the following:
  // 1. scope value is 'a'
  // 2. user enters 'b'
  // 3. ng-change kicks in and reverts scope value to 'a'
  //    -> scope value did not change since the last digest as
  //       ng-change executes in ap
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

angular指令心得(ng-model) 的相关文章

随机推荐

  • Eclipse安装JavaScript智能提示插件 spket

    1 首先下载eclipse的spket插件 http www spket com download html 也可以下载Spket IDE单独安装使用 不用eclipse
  • 硬件系统工程师宝典(12)-----EMC应该知道的事

    各位同学大家好 欢迎继续做客电子工程学习圈 今天我们继续来讲这本书 硬件系统工程师宝典 上篇我们说到在做电源完整性分析时去耦电容要遵循的规则 大电容的去耦半径大 小电容的去耦半径小 电容焊盘扇出时 双过孔可以减少寄生电感等 今天我们开始学习
  • python读取、显示、保存图片

    一 opencv 读 cv2 imread path mode 读取出来是ndarray 如果是读取灰度图 需要指定颜色模式为cv2 IMREAD GRAYSCALE 这样读取出的是一个二维数组 而不是彩色图像的三维数组 如果读取彩色图像
  • ps2023如何导出svg

    在 文件 文件 导出首选项 里勾选 使用旧版导出为 就可以在图层里右键导出svg啦 否则切图也导不出svg 右键导出为里面的格式也没有svg选项 官方建议使用以下解决方案 https helpx adobe com photoshop us
  • windows配置git公钥,读写远程git项目

    首先Windows电脑需要下载并安装git 从官网直接下载然后安装即可 https git scm com download win 添加公钥 ssh keygen t rsa C xxxxx xx com 注意 这个xxxxx xx co
  • Hadoop是小象——Hadoop集群安装配置

    文章目录 所需软件 集群网络配置 集群SSH免密登陆设置 Hadoop安装配置 所需软件 Linux所需软件包括 JavaTM1 5 x 必须安装 建议选择Sun公司发行的Java版本 以前安装过 ssh 必须安装并且保证 sshd一直运行
  • 不认识的东西

    typedef struct 1 struct定义一个结构体 2 typedef给这个结构体改一个名字 typedef struct student Student Student就是这个结构体修改后的名字
  • 数据结构——单链表的实现(c语言版)

    前言 单链表作为顺序表的一种 了解并且熟悉它的结构对于我们学习更加复杂的数据结构是有一定意义的 虽然单链表有一定的缺陷 但是单链表也有它存在的价值 它也是作为其他数据结构的一部分出现的 比如在图 哈希表中 目录 1 链表节点的结构 2 头插
  • cublas_v2.h: No such file or directory

    caffe正常编译了 但是另外一个工程中使用caffe时显示 cublas v2 h No such file or directory 直接在该工程的cmakelist文件中加入 INCLUDE DIRECTORIES usr local
  • Git Pull 错误

    当是用TortoiseGit 从多个源 Pull过数据后 不能再使用默认的 Remote origin选项进行Pull操作 每个工程 Commit Push前需要Pull操作时 采用独立的URL 即 下面的选项 Arbitrary URL
  • Activiti进阶(九)——接收任务(ReceiveTask)

    转载地址 http blog csdn net zjx86320 viewmode contents 接收任务 ReceiveTask 即等待任务 接收任务是一个简单任务 它会等待对应消息的到达 当前 官方只实现 了这个任务的Java语义
  • HwBinder驱动篇-Android10.0 HwBinder通信原理(十)

    Android取经之路 的源码都基于Android Q 10 0 进行分析 Android取经之路 系列文章 系统启动篇 Android系统架构Android是怎么启动的Android 10 0系统启动之init进程Android10 0系
  • 解决maven配置报错:The JAVA_HOME environment variable is not defined correctly(亲测有效)

    显然是环境变量的问题导致的 1 对于初学者而言 建议配置两个maven环境变量 2 添加至path 变量值是 MAVEN HOME bin M2 HOME bin 3 进入cmd 输入mvn v进行测试 如果是下面这样 说明就成功了 4 如
  • pytorch的语义分割------数据增广

    官方文档 https pytorch org docs stable torchvision transforms html highlight torchvision 20transforms 20functional module to
  • maven编译项目抛出out of memory

    是java堆内存过小的原因造成的 新增环境变量 MAVEN OPTS Xmx512m 问题解决
  • 【融职培训】Web前端学习 第11章 微信开发5 微信支付

    一 概述 如果需要实现微信支付功能 需要有一个已认证的微信服务号 并且开通微信支付 开通后微信会提供一个商户ID 有了这个ID才能成功调用微信支付接口 开通微信支付后 需要在微信支付后台 产品中心 gt 开发配置 中配置 JSAPI支付授权
  • 不小心在服务器上删了文件怎么恢复出厂设置,文件删除了怎么恢复?这样才能彻底清除彻底清除...

    现在人换手机就像换衣服 虽然不是一天一换 但大多数人一年一换已经成为常态 所以闲置的旧手机也越来越多 一般旧手机大家都是闲置 或者二手转卖 或是送给别人使用 如此一来 旧手机上各种数据就需要彻底清除 否则旧手机上个人信息一旦泄露 很可能会给
  • HTML教程

    第一章 HTML标签 网页格式 html 网页的开始与结束 body 网页的主体部分 显示在网页中用户可以浏览到的内容 head 网页的头部 大部分不显示在用户浏览界面 meta 网页的摘要信息 不会显示在浏览器浏览界面 title 网页标
  • 人工智能-Tansformer-全套讲解15-20章

    第21章 基于Bayesian Theory的MRC文本理解基础经典模型算法详解 1 Bayesian prior在模型训练时候对Weight控制 训练速度影响等功能详解 2 Bayesian prior能够提供模型训练速度和质量的数学原理
  • angular指令心得(ng-model)

    angular指令心得 ng model 在项目中编写指令 常常会依赖其他的指令来实现想要达到的功能 其中最常用到的便是ng model 它为我们明确了需要绑定的属性 虽然在指令中可以通过通过使用独立作用域的 来进行双向绑定 但使用ng m