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

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

angularjs

如何使用angularjs将文本插入活动文本区域,angularjs,Angularjs,我对AngularJS很陌生，我一直在为一个客户做一个项目。我需要在一个页面上有多个文本区域，并在按下按钮时让最后一个活动区域填充文本。我发现了一个plunker，它可以通过一个输入和一个textarea来满足我的需要，但是当我添加一个额外的textarea时，我要么同时填充两个textarea，要么只填充一个textarea var app=角度。模块'plunker'，[]； app.controller'MyCtrl'，函数$scope，$rootScope{ $scope.items=

我对AngularJS很陌生，我一直在为一个客户做一个项目。我需要在一个页面上有多个文本区域，并在按下按钮时让最后一个活动区域填充文本。我发现了一个plunker，它可以通过一个输入和一个textarea来满足我的需要，但是当我添加一个额外的textarea时，我要么同时填充两个textarea，要么只填充一个textarea

var app=角度。模块'plunker'，[]； app.controller'MyCtrl'，函数$scope，$rootScope{ $scope.items=[]； $scope.add=函数{ $scope.items.push$scope.someInput； $rootScope.$broadcast'add'，$scope.someInput； } }; 应用程序指令“myText”[“$rootScope”，函数$rootScope{ 返回{ 链接：函数范围、元素、属性{ $rootScope.$on'add'，functione，val{ var-domElement=元素[0]；如果是文档选择{ 聚焦； var sel=document.selection.createRange； sel.text=val；聚焦； }如果doElement.selectionStart | | doElement.selectionStart==0，则为else{ var startPos=domElement.selectionStart； var endPos=domeElement.selectionEnd； var scrollTop=domElement.scrollTop； domElement.value=domElement.value.substring0，startPos+val+domElement.value.substringendPos，domElement.value.length；聚焦； doElement.selectionStart=startPos+val.length； doElement.selectionEnd=startPos+val.length； doElement.scrollTop=scrollTop； }否则{ doElement.value+=val；聚焦； } }; } } } ] 安古拉斯普朗克文件。书写；添加

Created{{item}

一个快速的原型，如果这符合你正在寻找的，请注意，这只是一个草案，应该进行适当的重构。我不想在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>

您可能只需要您的指令就可以有一个独立的作用域。