如何使用angularjs将文本插入到活动的textarea中

我对AngularJS来说很新，而且我被困在客户端的项目中。我需要在一个页面上有多个textareas，并且当我按下一个按钮时，最后一个活动的页面会填充文本。我找到了一个能够完成我所需要的输入和单个文本区域的工作，但是当我添加一个额外的文本区域时，我最终将填充textarea或者只是一个。如何使用angularjs将文本插入到活动的textarea中

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="[email protected]"></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>

我不知道如果我需要保持在$上这是在拨弄或使用$来代替观看。另外，我认为我应该在那里使用document.activeElement。任何帮助或片段解释要做什么将不胜感激

来源

2014-09-28 rubbing

你可能只是需要你的指令有一个孤立的范围。 – 2014-09-28 05:14:59

快速原型，如果这匹配你在找什么，请注意，它只是一个草案，应该适当重构。我会避免在Angular中过多地使用DOM元素属性，并且只为一个简单的boardcasting注入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>

来源

2014-09-28 06:00:14 MikeNQ

如何使用angularjs将文本插入到活动的textarea中

回答

相关问题