Textarea ng-bind,其中value具有前缀和后缀

Question

在我看来,我正在努力完成一些相当简单的事情.当使用类似文本输入的东西时也是如此.我正在尝试在textarea上创建模型绑定,其中当用户键入时,值显示带有前缀和后缀.前缀和后缀是引号:

“My awesome quote”

问题是,我目前正在使用ng-model,我当然不能使用它.我正在考虑绑定到变量,保持没有前缀和后缀的值,然后观察该变量.当具有原始值的变量随后发生变化时,我会在范围上将带有pre和suffix的值写入另一个变量.然后,当用户输入时,该变量将显示在textarea中.唯一的问题是,与输入字段不同,textarea没有value属性.

这甚至可能吗？

编辑

如果我用输入文本字段在哪里实现这一点,我将创建一个名为A的变量,以保存在用户键入时更改的原始值.当A发生变化时,我会接受原始值,在其周围加上引号并将该新值存储在另一个变量中,也在范围内.这个新变量叫做B.

然后,输入字段将在A变量上使用ng-bind,并使用输入字段值属性显示B变量中的内容.如下所示:

<input type="text" ng-bind="A" value="{{B}}">

我现在没有时间创造一个小提琴,但我会在本周晚些时候尝试这样做.上面的描述都是理论上的,因为我还没有测试过它.

Answer 1

您的需求非常有趣，可以分为两个主要功能：

\n\n

1.为视图值添加前缀和后缀，而不影响模型值

\n\n

这是使用NgModelController实现的。我已经创建了一个观察程序，ngModelController.$viewValue每当它发生变化时，如果它不包含前缀或后缀，我就会添加这些值。

\n\n

2. 不允许用户干扰前缀或后缀

\n\n

这有点棘手，但我找到了一种巧妙的方法来获取和设置输入或文本区域元素的插入符位置。

\n\n

这是一个工作示例：

\n\n

\r\n

\r\n

angular\r\n  .module(\'myApp\', [])\r\n  .directive(\'beautifyText\', function() {\r\n    return {\r\n      link: function(scope, iElement, iAttrs, ngModelController) {\r\n        // Adds the prefix and suffix\r\n        (function() {\r\n          var prefix = iAttrs.beautifyTextWithPrefix;\r\n          var suffix = iAttrs.beautifyTextWithSuffix;\r\n\r\n          ngModelController.$parsers.push(function(value) {\r\n            if (angular.isString(value)) {\r\n              return value.replace(new RegExp(\'^\' + prefix), \'\').replace(new RegExp(suffix + \'$\'), \'\');\r\n            }\r\n\r\n            return \'\';\r\n          });\r\n\r\n          scope.$watch(function() {\r\n            return ngModelController.$viewValue;\r\n          }, function(newValue) {\r\n            if (angular.isString(newValue) && newValue.length > 0) {\r\n              if (angular.isString(ngModelController.$modelValue) && ngModelController.$modelValue.length === 0 && newValue.length === 1) {\r\n                ngModelController.$viewValue = \'\';\r\n                ngModelController.$render();\r\n                return;\r\n              }\r\n\r\n              if (!isBeautifiedWithPrefix(newValue)) {\r\n                ngModelController.$viewValue = prefix + newValue;\r\n              }\r\n\r\n              if (!isBeautifiedWithSuffix(newValue)) {\r\n                ngModelController.$viewValue = newValue + suffix;\r\n              }\r\n\r\n              ngModelController.$render();\r\n            } else {\r\n              ngModelController.$viewValue = \'\';\r\n              ngModelController.$render();\r\n            }\r\n          });\r\n\r\n          function isBeautifiedWithPrefix(value) {\r\n            return value.match(new RegExp(\'^\' + prefix)) !== null;\r\n          }\r\n\r\n          function isBeautifiedWithSuffix(value) {\r\n            return value.match(new RegExp(suffix + \'$\')) !== null;\r\n          }\r\n        })();\r\n\r\n        // Changes the caret position\r\n        (function() {\r\n          var element = iElement[0];\r\n\r\n          // https://stackoverflow.com/questions/7745867/how-do-you-get-the-cursor-position-in-a-textarea#answer-7745998\r\n          function getCursorPos() {\r\n            if ("selectionStart" in element && document.activeElement == element) {\r\n              return {\r\n                start: element.selectionStart,\r\n                end: element.selectionEnd\r\n              };\r\n            } else if (element.createTextRange) {\r\n              var sel = document.selection.createRange();\r\n              if (sel.parentElement() === element) {\r\n                var rng = element.createTextRange();\r\n                rng.moveToBookmark(sel.getBookmark());\r\n                for (var len = 0; rng.compareEndPoints("EndToStart", rng) > 0; rng.moveEnd("character", -1)) {\r\n                  len++;\r\n                }\r\n                rng.setEndPoint("StartToStart", element.createTextRange());\r\n                for (var pos = {\r\n                  start: 0,\r\n                  end: len\r\n                }; rng.compareEndPoints("EndToStart", rng) > 0; rng.moveEnd("character", -1)) {\r\n                  pos.start++;\r\n                  pos.end++;\r\n                }\r\n                return pos;\r\n              }\r\n            }\r\n            return -1;\r\n          }\r\n\r\n          // https://stackoverflow.com/questions/7745867/how-do-you-get-the-cursor-position-in-a-textarea#answer-7745998\r\n          function setCursorPos(start, end) {\r\n            if (arguments.length < 2) {\r\n              end = start;\r\n            }\r\n\r\n            if ("selectionStart" in element) {\r\n              element.selectionStart = start;\r\n              element.selectionEnd = end;\r\n            } else if (element.createTextRange) {\r\n              var rng = element.createTextRange();\r\n              rng.moveStart("character", start);\r\n              rng.collapse();\r\n              rng.moveEnd("character", end - start);\r\n              rng.select();\r\n            }\r\n          }\r\n\r\n          iElement.bind(\'mousedown mouseup keydown keyup\', function() {\r\n            if (ngModelController.$viewValue.length > 0) {\r\n              var caretPosition = getCursorPos();\r\n\r\n              if (caretPosition.start === 0) {\r\n                setCursorPos(1, caretPosition.end < 1 ? 1 : caretPosition.end);\r\n              }\r\n\r\n              if (caretPosition.end === ngModelController.$viewValue.length) {\r\n                setCursorPos(caretPosition.start, ngModelController.$viewValue.length - 1);\r\n              }\r\n            }\r\n          });\r\n        })();\r\n      },\r\n      restrict: \'A\',\r\n      require: \'ngModel\'\r\n    }\r\n  });

\r\n

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>\r\n\r\n<div ng-app="myApp">\r\n  <textarea ng-model="myVariable" beautify-text beautify-text-with-prefix="\xe2\x80\x9c" beautify-text-with-suffix="\xe2\x80\x9d"></textarea>\r\n  <p>myVariable: {{ myVariable }}</p>\r\n</div>

\r\n

\r\n

\r\n

\n