angularjs1.4x 指令开发实践之实现一个具有参数校验功能的输入框

                                                          指令开发实践之实现一个具有参数校验功能的输入框

背景介绍：

模块化编程是为了提高代码的复用性，为了方便调用需要提供给调用者该模块详细文档描述，包括：组件功能，输入输出接口。

适当的功能抽取和高内聚低耦合接口实现才能实现合理的组件化编程。

由于angularjs需要浏览器支持es6目前限制了其应用范围，这里选取angular1.4x版本指令来实现这个组件。

模块功能定义：

模块输入输出：

伪代码：

define(['app'], function (app) {

    app.directive('testInput', function () {   
        return {
            restrict: 'E',
            scope: {
                priceOut:'=', 
                price: '=',
                leastPrice:'@',
                maxPrice:"@",
                objChanged:'&',
                type:'@'
            },
            replace: true,
            templateUrl: 'template.html',
            controller: ['$scope','$filter',function ($scope,$filter) {
       
            }],
             link: function ($scope, element) {
                element.ready(function(){
                    var $input=element.find('input');
                    $input.on('keyup',function keyUp(e,leave){
                    var keycode = window.event?e.keyCode:e.which;
                    if(keycode==13){
                     $input[0].blur();
                 }
                });
             });
            }
        }
    });

});

问题：

组件型指令中controller和link可以同时使用，各自的角色是什么？

其中，独立作用域中三种传值方法及调用方法。

‘=’ 双向传递

‘&’ 回调事件

‘@’ 传递字面值

调用方法：

<test-input price-out = 'Model.priceout' obj-changed ='Method.objChanged()' least-price = '{{Model.leastPrice}}'/ >

用到了angularjs 那些dom操作？

var $input=element.find('input');//查找当前元素的input子元素。

绑定事件和突发事件？

  var $input=element.find('input');//获取当前元素

  $input[0].blur();//通过[0]转换成原生js对象，可以通过原生js对象的blur(),click()等方法触发对应事件。

严格注入模式注入服务的写法：

controller: ['$scope','$filter',function ($scope,$filter) {
       
 }]

参考文档: