Question

我是AngularJS的新手，我被困在一个客户的项目上。我需要在页面上有多个textareas，并且当我按下按钮时，最后一个活动文本填充文本。我找到了一个用输入和单个textarea做我需要的东西，但当我添加一个额外的textarea时，我要么最终填充textareas或只填充一个。

Plunker that I'm trying to edit:

var app = angular.module('plunker', []);

app.controller('MyCtrl', function($scope, $rootScope) {
  $scope.items = [];

  $scope.add = function() {
    $scope.items.push($scope.someInput);
    $rootScope.$broadcast('add', $scope.someInput);
  }
});

app.directive('myText', ['$rootScope',
  function($rootScope) {
    return {
      link: function(scope, element, attrs) {
        $rootScope.$on('add', function(e, val) {
          var domElement = element[0];

          if (document.selection) {
            domElement.focus();
            var sel = document.selection.createRange();
            sel.text = val;
            domElement.focus();
          } else if (domElement.selectionStart || domElement.selectionStart === 0) {
            var startPos = domElement.selectionStart;
            var endPos = domElement.selectionEnd;
            var scrollTop = domElement.scrollTop;
            domElement.value = domElement.value.substring(0, startPos) + val + domElement.value.substring(endPos, domElement.value.length);
            domElement.focus();
            domElement.selectionStart = startPos + val.length;
            domElement.selectionEnd = startPos + val.length;
            domElement.scrollTop = scrollTop;
          } else {
            domElement.value += val;
            domElement.focus();
          }

        });
      }
    }
  }
])

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link href="style.css" rel="stylesheet" />
  <script data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js" data-require="angular.js@1.2.x"></script>
  <script src="app.js"></script>
</head>

<body>
  <div ng-controller="MyCtrl">
    <input ng-model="someInput">
    <button ng-click="add()">Add</button>
    <p ng-repeat="item in items">Created {{ item }}</p>
  </div>

  <textarea my-text="">

  </textarea>

</body>

</html>

我不确定我是否需要保留小提琴中的$或使用$ watch代替。另外，我想我应该在某处使用document.activeElement。任何帮助或片段解释将要做什么将非常感激

Answer 1

快速原型，如果符合您的要求，请注意它只是一个草稿，应该正确重构。我会避免在Angular中过多地使用DOM元素属性，并且仅仅为一个简单的板播注入rootScope就有点过分了。

<html>
<head>
</head>
<body ng-app="App" ng-controller="MyCtrl">
    <input type="text" ng-model="input">
    <span ng-bind="input"></span>
    <button ng-click="populate()">Populate</button>
    <textarea my-text></textarea>
    <textarea my-text></textarea>
    <textarea my-text></textarea>
    <textarea my-text></textarea>

    <script src="angular.js"></script>
    <script>
    (function(){
        angular.module("App",[])
        .value('TextManager', {
            lastActive: -1,
            texts: []
        })
        .controller('MyCtrl', function($scope, TextManager){
            $scope.input = '';
            $scope.populate = function(){
                console.log(TextManager.texts[TextManager.lastActive]);
                if (TextManager.texts[TextManager.lastActive])
                    TextManager.texts[TextManager.lastActive][0].value += $scope.input;
            };
        })
        .directive("myText", function(TextManager){
            return {
                restrict: "A",
                scope: [],
                link: function(scope, element, attr){
                    TextManager.texts.push(element);
                    scope.index = TextManager.texts.length-1;
                    element.index = scope.index;
                    element.on('click', function(event){
                        TextManager.lastActive = scope.index;
                    });
                }
            };
        });
    })();
    </script>
</body>
</html>

如何使用angularjs将文本插入活动文本区域

1 个答案: