Question

我目前正在使用Ionic框架和AngularJS开发移动应用程序。在我的登录页面中，用户的帐户名称将在其第二个连接上加载（并被视为密码字段）。但是，此用户可以拥有多个帐户。我被问到的是显示此登录的最后三个字符。

我本来想使用类似过滤器的东西，但它似乎不适用于输入......

然后我一直在研究angularJS指令，现在我已经苦苦挣扎了几天，尝试过很多东西。

我在做

之类的事情时遇到的主要问题

app.directive("editor", function(){
 return {
    require: "?ngModel",
    scope: true,
    template: "<input ng-model='value' ng-change='onChange()'>",
    link: function(scope, element, attrs, ngModel){
      if (!ngModel) return;

      scope.onChange = function(){
        /* process coded value here */
        ngModel.$setViewValue(scope.value);
      };

      ngModel.$render = function(){
       /* Or process coded value here */
        scope.value = ngModel.$modelValue;
      };
    }
  };
});

使用此指令，我设法更改了控制器值，但我只希望更改我的视图值。

我真的很感谢你的帮助，以及你的解释！

Answer 1

我试着做你想做的事。它看起来像我。

也许这不是一个完整的解决方案，但它确实有效。

我还没有在移动浏览器和Safari中测试它。

您可能需要稍微修改一下。

jsfiddle上的实例。

＆＃13;

angular.module('ExampleApp', [])
  .controller('firstCtrl', function($scope) {
    $scope.sampleItem = {
      sampleName: "1234"
    };
    $scope.change = function(val) {
      console.log(val);
    }
  })
  .directive("useModel", ["SelectManager",
    function(SelectManager) {
      return {
        restrict: "A",
        scope: {
          useModel: "=",
          useModelReplacment: "@",
          useModelCharacterShow: "=",
          useChange: "&"
        },
        link: function(scope, elem) {
          if (!angular.isDefined(scope.useModelCharacterShow))
            scope.useModelCharacterShow = 0;
          if (scope.useModelReplacment == undefined)
            scope.useModelReplacment = "*";
          if (scope.useModel == undefined)
            scope.useModel = "";
          else
            elem.val(getMaskValue(scope.useModel));

          scope.$watch('useModel', function(val) {
            elem.val(getMaskValue(val));
            if (scope.useChange)
              scope.useChange();
          })

          function getMaskValue(val) {
            var maskVal = "";
            for (var i = 0; i < val.length; i++) {
              if (scope.useModelCharacterShow > 0) {
                if (i >= scope.useModelCharacterShow)
                  maskVal += scope.useModelReplacment;
                else
                  maskVal += val[i];
              }
              if (scope.useModelCharacterShow < 0) {
                if (i < val.length + scope.useModelCharacterShow)
                  maskVal += scope.useModelReplacment;
                else
                  maskVal += val[i];
              }
              if (scope.useModelCharacterShow == 0) {
                maskVal += scope.useModelReplacment;
              }
            }
            return maskVal;
          }

          function onKeyPressed(event) {

            if (event.ctrlKey && (event.charCode == 99 || event.charCode == 118 || event.charCode == 97 || event.charCode == 120))
              return true;
            var key_code = event.charCode;
            var input = event.srcElement || event.target;
            var ch = String.fromCharCode(key_code);
            var start = SelectManager._getSelectionStart(input);
            var end = SelectManager._getSelectionEnd(input);
            // console.log('start end', start,end);
            scope.useModel = scope.useModel.substr(0, start) + ch + scope.useModel.substr(end);
            // console.log('inner value onKeyPressed', scope.useModel);
            scope.$apply();

            //console.log('show value onKeyPressed', maskVal);
            //input.value = getMaskValue(scope.useModel);
            event.returnValue = false;
            SelectManager._setSelection(input, start + 1, start + 1);
            return false;
          }

          function onKeyUp(event) {

            if (event.ctrlKey && (event.charCode == 99 || event.charCode == 118 || event.charCode == 97 || event.charCode == 120))
              return true;
            var key_code = event.keyCode;
            if (!(key_code == 13 || key_code == 27 || key_code == 8 || key_code == 46))
              return true;
            var input = event.srcElement || event.target;
            var start = SelectManager._getSelectionStart(input);
            var end = SelectManager._getSelectionEnd(input);
            // console.log('start end', start,end);
            if (key_code == 8 && start == end) {
              start--;
            }
            if (key_code == 46 && start == end) {
              //start++;
              end++;
            }
            //console.log('inner value keyup', scope.useModel);
            scope.useModel = scope.useModel.substr(0, start) + scope.useModel.substr(end);

            //console.log('inner value keyup', scope.useModel);
            scope.$apply();
            //input.value = getMaskValue(scope.useModel);;
            event.returnValue = false;
            SelectManager._setSelection(input, start, start);
            return event.returnValue;
          }

          function onKeyDown() {
            var key_code = event.keyCode;
            if (!(key_code == 13 || key_code == 27 || key_code == 8 || key_code == 46))
              return true;
            event.returnValue = false;
            return event.returnValue;
          }

          function onPaste(event) {
            var input = event.srcElement || event.target;
            var ch = "";
            if (event.type == "drop") {
              event.returnValue = false;
              return false
            }
            if (event.type == "paste")
              ch = event.clipboardData.getData("text");
            var start = SelectManager._getSelectionStart(input);
            var end = SelectManager._getSelectionEnd(input);
            // console.log('start end', start,end);
            scope.useModel = scope.useModel.substr(0, start) + ch + scope.useModel.substr(end);
            // console.log('inner value onKeyPressed', scope.useModel);
            scope.$apply();
            //input.value = getMaskValue(scope.useModel);
            event.returnValue = false;
            SelectManager._setSelection(input, start + ch.length, start + ch.length);
            return false;
          }
          elem.on('keypress', onKeyPressed);
          elem.on('keyup', onKeyUp);
          elem.on('keydown', onKeyDown);
          elem.on('paste drop', onPaste);
        },
      };
    }
  ])
  .service('SelectManager', function() {
    return {
      _getSelectionStart: function(obj) {
        var p = 0;
        if (obj.selectionStart) {
          if (typeof(obj.selectionStart) == "number") p = obj.selectionStart;
        } else if (document.selection) {
          var r = document.selection.createRange().duplicate();
          r.moveEnd("character", obj.value.length);
          p = obj.value.lastIndexOf(r.text);
          if (r.text == "") p = obj.value.length;
        }
        return p;
      },
      _getSelectionEnd: function(obj) {
        var p = 0;
        if (obj.selectionEnd) {
          if (typeof(obj.selectionEnd) == "number") {
            p = obj.selectionEnd;
          }
        } else if (document.selection) {
          var r = document.selection.createRange().duplicate();
          r.moveStart("character", -obj.value.length);
          p = r.text.length;
        }
        return p;
      },
      GetXY: function(obj) {
        var x = 0;
        var y = 0;
        while (obj.offsetParent) {
          x += obj.offsetLeft;
          y += obj.offsetTop;
          obj = obj.offsetParent;
        }
        return {
          X: x,
          Y: y
        };
      },
      _setSelection: function(obj, a, b) {
        if (obj.setSelectionRange) {
          obj.focus();
          obj.setSelectionRange(a, b);
        } else if (obj.createTextRange) {
          var r = obj.createTextRange();
          r.collapse();
          r.moveStart("character", a);
          r.moveEnd("character", (b - a));
          r.select();
        }
      },
      _Collapse: function(obj) {
        var r = obj.createTextRange();
        r.collapse();
      }
    };

  });

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="firstCtrl">
    use-model(first three) <input use-model="sampleItem.sampleName" use-change="change(sampleItem.sampleName)" use-Model-Character-Show="3">
    <br> use-model(last three) <input use-model="sampleItem.sampleName" use-change="change(sampleItem.sampleName)" use-Model-Character-Show="-3">
    <br> ng-model <input ng-model="sampleItem.sampleName">
    <pre> {{sampleItem.sampleName}}</pre>
    <button ng-click="sampleItem.sampleName='AAAAA'">
        set AAAAA
    </button>
  </div>
</div>

＆＃13;

使用angularJS

1 个答案: