美文网首页前端
angularjs之require:ngModel

angularjs之require:ngModel

作者: 杨杨1314 | 来源:发表于2017-06-02 14:24 被阅读114次

require表示需要依赖的指令;如果有依赖的指令,那么link的第四个参数也就是依赖指令的对外暴露的controller也自动会被注入进来

require选项的值可以分别用前缀?、^ 和?^进行修饰,也可以不修饰。

如果不进行修饰,比如require:'thisDirective',那么require只会在当前指令中查找控制器

如果想要指向上游的指令,那么就是用^进行修饰,比如require:'^parentDirective',如果没有找到,那就会抛出一个错误。

如果使用?前缀,就意味着如果在当前指令没有找到控制器,就将null作为link的第四个参数;

那么,如果将?和^结合起来,就可以既指定上游指令,又可以在找不到时,不抛出严重的错误。

这是一个model require应用

这时候,打印vals会看到这个对象包含很多属性和方法。我捡觉得重要的记录下。

1.$viewValue为视图值,即显示在视图(页面)的实际值(就是上面例子中input输入框的值)

$modelValue为模型值,即赋给ng-model的值(与控制器绑定的值)

两者不一定相等,因为$viewValue同步到$modelValue要经过一系列的操作(经过三个管道)。

虽然大多数情况下两者是相等的。

demo

2.$render函数负责将模型值同步到视图上, 如果模型值被改变,需要同步视图的值。

3.$setViewValue用于设置视图值(上面的例子就是将input的value值赋值给$viewValue)

比如:vals.$setViewValue(scope._val + '123');

4.$error 一个包含所有error的对象

5.$isEmpty(value) 函数,判断是否为空

当 需要判断input的value值是否为空的时候,可以使用这个方法

其实可以就当它是个判断是否为空的方法,传入一个参数,判断这个参数是否为空,你传入任何值都可以

要是需要,也可以自己在指令里重写这个方法,来定义自己需要的“是否为空”的概念

6.$valid 如果没有错误,值是true.

$invalid 如果有错误,值是true.

4.5.6综合

7.$pristine 如果用户还没有进行过交互,值是true.

$drity 如果用户已经进行过交互,值是true.

8.$name 的值为input的name属性的值

获取name里面的值

当console.log(vals.$name)以后。会打印出来“myname”.

9.$setPristine 设置为原始状态,会添加ng-pristine的class类名,移除ng-dirty的class类名

至今为止,还没有用过require这个选项,先记录下来。

相关文章

  • angularjs之require:ngModel

    require表示需要依赖的指令;如果有依赖的指令,那么link的第四个参数也就是依赖指令的对外暴露的contro...

  • Angular: Can't bind to 'ngModel'

    原因:html代码中出现类似这样的 语句,其中使用了[(ngModel)]。在AngularJS2或以上版本中使用...

  • 前端学习脉络分析

    前端技技术追求 范畴是,html,css,js,jquery等 框架要求,require.js,angularjs...

  • Angular之ngModel使用

    在 Angular 4.x 中对于使用 Template-Driven 表单场景,如果需要实现表单数据绑定。我们就...

  • [(ngModel)]

    虽然NgModel是一个有效的Angular指令,但它默认情况下却是不可用的。 它属于一个可选模块FormsMod...

  • Angular 手动实现ngModal数据双向绑定

    ngModel Angular中我们在formsModule中使用ngModel实现数据的双向绑定 这里的ngMo...

  • 理解angularjs之自定义指令

    理解angularjs之自定义指令尽管angularjs目前受关注程度远远低于Vuejs与reactjs,但对...

  • AngularJS 之 Factory vs Service v

    AngularJS 之 Factory vs Service vs Provider理解

  • AnjularJS 跳转

    本文转自:风轻云淡 AngularJS之页面跳转Route 除了引用AngularJs.js外,还要引用路由JS,...

  • input

    1、ngModel 2、定义模版引擎

网友评论

    本文标题:angularjs之require:ngModel

    本文链接:https://www.haomeiwen.com/subject/altufxtx.html