landers.angular/src/js/utils/directive-lock-input.js

landers.angular

;angular.module('Landers.angular')
    .directive('lockInput', ['$compile', '$timeout', 'Runtime', function($compile, $timeout, Runtime){
        return {
            restrict: 'A',
            link: function($scope, $element, $attrs){
                var get_lock_key = function() {
                    var lock_key = $attrs['lockInputKey'];
                    if (!lock_key) {
                        var ngModel = $attrs['ngModel'];
                        var arr = ngModel.split('.');
                        lock_key= arr[arr.length-1];
                    }
                    return lock_key;
                }

                var key = get_lock_key();
                var runtime = Runtime.make($scope);

                $scope.$watch(function(){
                    return $attrs['lockInputInit'];
                }, function(init){
                    if (init === undefined) return;
                    runtime.set('lockInput', init==='true', key);
                    var $wraper = $element.parent();
                    if ($wraper.find('.btn-lock-input').length) return;

                    var $input_group = $wraper.hasClass('input-group') ? $wraper : (function(){
                        var $ret = $('<div class="input-group"></div>').appendTo($wraper);
                        $ret.append($element);
                        return $ret;
                    }());

                    var $input_group_addon = $input_group.find('.input-group-addon');
                    if (!$input_group_addon.length) {
                        $input_group_addon = $('<div class="input-group-addon"></div>').appendTo($input_group);
                    }

                    var html = '';
                    html += '<a class="btn-lock-input lock-input-on" ng-if="$runtime.lockInput.' + key + '" href="javascript:;" ng-click="unlockInput(\'' + key + '\')">启用编辑</a>';
                    html += '<a class="btn-lock-input lock-input-on" ng-if="!$runtime.lockInput.' + key + '" href="javascript:;" ng-click="lockInput(\'' + key + '\')">禁用编辑</a>';
                    $input_group_addon.append($compile(html)($scope));
                });

                angular.extend($scope, {
                    unlockInput: function(lock_key){
                        runtime.set('lockInput', false, lock_key);
                    },
                    lockInput: function(lock_key){
                        runtime.set('lockInput', true, lock_key);
                    }
                });
            }
        }
    }]);