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

发布时间:2017-6-29 10:52:44编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"angularjs1.4x 指令开发实践之实现一个具有参数校验功能的输入框",主要涉及到angularjs1.4x 指令开发实践之实现一个具有参数校验功能的输入框方面的内容,对于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) {
       
 }]


参考文档:



上一篇:设备管理思维与模式创新
下一篇:虚拟机搭建LVS

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款