Angular js指令收录(六)

前端之家收集整理的这篇文章主要介绍了Angular js指令收录(六)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

AngularJS中的指令是其尤为复杂的一个部分,但是这也是其比较好玩的地方。今天我们就来说一说AngularJS中的NgModelController

在AngularJS的内置指令中,有一个directive叫做ngModel,我们可以用它来沟通控制器和视图层的数据交换。说的简单点,就是我们可以用它来做双方数据绑定

这篇文章我们就来说一说如何在我们自定义的指令中,利用ngModelcontroller来做双向数据绑定。

注意,本篇文章不是对NgModelController文档的说明,而是更偏向实践。下面我将全程带领大家去实现一个自定义指令,并且利用ng-model属性来做双方的数据绑定。

示例

我们的app中使用了一个自定义的指令,名字叫做timeDruation,如下,

  1. 1
    2
    3
    4
    5
    6
  1. <div ng-app="HelloApp" ng-controller="HelloController">
    <h1>自定义指令</h1>
    <time-duration ng-model="test"></time-duration>
    <h1>默认指令<input ng-model="test">second
    </div>

JS代码如下,

  1. 1
    2
    3
    4
    5
  1. angular.module('HelloApp',[])
    .directive('timeDuration',TimeDurationDirective);
    .controller('HelloController',function($scope) {
    $scope.test = 1;
    });

我们的示例指令可以做这样一件事,可以指定几个常见的时间单位,并且能够输入数据。最终我们将得到对应的秒数。其功能的截图如下,

这里我们特意将test变量分别绑定到我们的自定义指令和默认指令中,以观察其效果

自定义指令

闲话少叙,show my code.

先上指令的模板。从上图中可以看出,指令包含一个输入框一个下拉选择框。

  1. 1
    2
    3
    4
    5
    6
    7
    8
    9
  1. <div class="time-duration">
    'num'>
    <select ng-model='unit'>
    <option value="seconds">Seconds</option>
    "minutes">Minutes"hours">Hours"days">Days</option>
    </select>
    模板其实很简单,这里就不多说了。下面我们来看看这个指令的逻辑部分。

  2. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
  3. function TimeDurationDirective() {
    var tpl = '....'; // 指令模板代码就是上面的内容,这里就不复制了。

    return {
    restrict: 'E',
    replace: true,
    template: tpl,
    require: 'ngModel',
    scope: {},
    link: scope,element,attrs,ngModelController) {
    var multiplierMap = {
    seconds: 1,
    minutes: 60,
    hours: 3600,
    days: 86400
    };
    var multiplierTypes = ['seconds','minutes',104)">'hours',104)">'days'];

    // TODO
    }
    };
    }
  4. 指令的link方法我们暂时TODO了它。后面会逐步完善。

  5. 我先来看看这个指令的定义,其中用到了require声明。我的博客中这篇文章AngularJS Directive用法说明require用法作了详细的说明。简单来说,require的作用就是为这个directive声明一个依赖关系,表明此directive依赖另一个指令的controller属性

  6. 这里稍微说明一下require的衍生用法。我们可以在require加上修辞量词,比如,

  7. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
  8. return {
    '^ngModel'
    }

    '?ngModel'
    }

    '?^ngModel'
    }
    • ^前缀修饰表示允许查找当前指令的父级指令,如果找不到对应指令的controller则抛出一个错误
    • ?则表示将这个require动作变成一个可选项,意思就是找不到对应指令的controller就算了,不会抛出错误
    • 当然,我们也可以联合使用这两个前缀修饰。
  9. 相对?ngModel^ngModel我们使用的频率要更加高一点。比如,

  10. 1
    2
    3
  11. <my-directive ng-model="my-model">
    <other-directive></other-directive>
    </my-directive>
  12. 这时,我们在other-directive中使用require: ^ngModel,它将会自动查找my-directive指令声明中的controller属性

  13. 使用NgModelController

  14. 当我们声明了require: 'ngModel'之后,在link方法中会注入第四个参数,这个参数就是我们require的那个指令对应的controller。这里就是内置指令ngModel的指控器ngModeController了。

  15. link: function (    // TODO
    }
  16. $viewValue$modelValue

  17. ngModelController中有两个很重要的属性,一个叫做$viewValue,一个叫做$modeValue。这两者的含义官方的解释如下,

  18. $viewValue: Actual string value in the view.
    $modelValue: The value in the model,that the control is bound to.

  19. 如果你对上面的官方解释有疑惑的话,我这里给出一种我个人的解释。

  20. $viewView就是指令渲染模板所用的值,而$modelView是在控制器中流通的值。很多时候,这两个值可能是不一样的。

  21. 比如你在页面上展示了一个日期,它显示的可能是“Oct. 20 2015”这样的字符串,但是呢,这个字符串在控制器中对应的值可能是一个Javascript的Date对象的实例。

  22. 再比如,我们的这个time-duration示例中,$viewValue其实指的是指令模板中numunit组合出来的值,而$modelValue是HelloAppController中test变量对应的值。

  23. $formatters和$parses

  24. 除了$modelValue这两个属性之外,还有两个用来处理他们的方法。分别是$parses$formatters

  25. 前者的是作用是将$viewValue->$modelValue,后者的作用恰好相反,是将$modelValue->$viewValue

  26. time-duration指令与外部控制器以及其内部的运作如下图,

    1. 在外部控制器中(即这里的HelloApp的controller),我们通过ng-model="test"将test变量传入指令time-duration中,并建立绑定关系。
    1. 在指令内部,$modelValue其实就是test值的一份拷贝。
    1. 我们通过$formatters()方法将$modelValue转变成$viewValue
    1. 然后调用$render()方法将$viewValue渲染到directive template中。
    1. 当我们通过某种途径监控到指令模板中的变量发生变化之后,我们调用$setViewValue()来更新$viewValue
    1. (4)相对应,我们通过$parsers方法将$viewValue转化成$modelValue
    1. $modelValue发生变化后,则会去更新HelloApp的UI。
  27. 完善指令逻辑

  28. 按照上面的流程,我们先来将$modelValue转化成$viewValue,然后在指令模板中进行渲染。

  29. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
  30. // $formatters接受一个数组
    // 数组是一系列方法,用于将modelValue转化成viewValue
    ngModelController.$formatters.push(modelValue) {
    var unit = 0,i,unitName;
    modelValue = parseInt(modelValue || 0);

    for (i = multiplierTypes.length-1; i >= 0; i--) {
    unitName = multiplierTypes[i];

    if (modelValue % multiplierMap[unitName] === 0) {
    unit = unitName;
    break;
    }
    }

    if (modelValue) {
    num = modelValue / multiplierMap[unit];
    }

    return {
    unit: unit,
    num: num
    };
    });
  31. 最后返回的对象就是$viewValue的value。(当然$viewValue还会有其他的一些属性。)

  32. 第二步,我们调用$render方法$viewValue渲染到指令模板中去。

  33. // $render用于将viewValue渲染到指令的模板中
    ngModelController.$render = ) {
    scope.unit = ngModelCtrl.$viewValue.unit;
    scope.num = ngModelCtrl.$viewValue.num;
    };
  34. 第三步,我们通过$watch来监控指令模板中unit变量。当其发生变化时,我们需要更新$viewValue

  35. 1
    2
    3
    4
    5
    6
    7
  36. scope.$watch('unit + num',95)">) {
    // $setViewValue用于更新viewValue
    ngModelController.$setViewValue({
    unit: scope.unit,
    num: scope.num
    });
    });
  37. 第四步,我们通过$parsers$modelValue

  38. // $parsers接受一个数组
    // 数组是一系列方法,用于将viewValue转化成modelValue
    ngModelController.$parsers.push(viewValue) {
    var unit = viewValue.unit;
    var num = viewValue.num;
    var multiplier;

    multiplier = multiplierMap[unit];

    return num * multiplier;
    });
  39. 这样一个双方的数据绑定逻辑就建立了。这里有一个在线示例,就是文中示例的完整代码,你可以去体验一下。

  40. 转载地址:http://blog.gejiawen.com/2015/12/20/using-ng-model-controller-with-angular-directive/

    • 猜你在找的Angularjs相关文章