前端

angularjs之require:ngModel

2017-06-02  本文已影响114人  杨杨1314

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这个选项,先记录下来。

上一篇下一篇

猜你喜欢

热点阅读