AngularJS写指令

日期:2016-5-3 13:51 | 标签: AngularJS | 阅读:376

指令的存在一个意义是实现语义化,另一个是解决解决模块的解耦与复用,作为angularJS的核心,必须深入理解。

指令属性参数详解

compile

负责对模板DOM进行转换。存在多个指令实例时也只会执行一遍。

负责将作用域和DOM进行链接。scope在此阶段才会绑定到元素上,指令的每个实例都会执行一遍。

指令案例

参考自AngularJS权威教程,实现自动填充指令

//HTML
<input type="text" ng-model="user.location" auto-fill="fetchCities" 
autocomplete="off" placeholder="Location" />

// 指令实现
.directive('autoFill', function($timeout) {
    return {
        restrict: 'EA',
        scope: {
            autoFill: '&',//函数
            ngModel: '='
        },
        compile: function(tEle, tAttrs) {
            //编译函数
            var tplEl = angular.element('<div class="typeahead">' +
                '<input type="text" autocomplete="off" />' +
                '<ul id="autolist" ng-show="reslist">' +
                    '<li ng-repeat="res in reslist" ' +
                    '>{{res.name}}</li>' +
                '</ul>' +
            '</div>');
            var input = tplEl.find('input');
            input.attr('type', tAttrs.type);
            input.attr('ng-model', tAttrs.ngModel);
            tEle.replaceWith(tplEl);
            return function(scope, ele, attrs, ctrl) {
                //链接函数
                var minKeyCount = attrs.minKeyCount || 3,
                timer,
                input = ele.find('input');
                input.bind('keyup', function(e) {
                    val = ele.val();
                    if(val.length < minKeyCount) {
                        if(timer) $timeout.cancel(timer);
                        scope.reslist = null;
                        return;
                } else {
                    if(timer) $timeout.cancel(timer);
                    timer = $timeout(function() {
                        scope.autoFill()(val).then(function(data) {
                            if(data && data.length > 0) {
                                scope.reslist = data;
                                scope.ngModel = data[0].zmw;
                            }
                        });
                    }, 300);
                }
                });
                // 失去焦点时隐藏reslist
                input.bind('blur', function(e) {
                    scope.reslist = null;
                    scope.$digest();
                });
            }
        }
    }
});

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式