美文网首页前端
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

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