如何使用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中

回答

相關問題