AngularJS - 无法从工厂服务中获得价值

Question

我在 AngularJS 中非常陌生，因此我面临一个问题并且无法理解确切的问题。我尝试的代码在普通的 javascript 代码中工作，但现在我想使用自定义服务（工厂函数）。实际上，我有一个文本区域，用户可以在其中输入他们的文本，然后他们可以通过选择任何文本来进行格式化。 （discovertheweb.in/woweditor - 这是我现在创建的现有网站，我想在此代码中应用角度）。现在，我创建了一个自定义服务来检查用户是否选择了任何内容。我在我的自定义服务中使用了以下代码，并尝试获取选择的起点、终点，以便我可以从 textarea 字段中获取选定的文本。但是，问题是我在选择起点和终点都得到了 0 值。当我在指令中使用相同的代码时，它可以工作，但尝试通过服务获取值，两者都显示为 0。请找到下面的代码，让我知道我在这里错过的代码。

定制服务：

(function(){
"use strict";
var wsApp = angular.module("WorkApp");
wsApp.factory("InputCheckService", function(){
    var defaultText = document.getElementById("input-text-area");                   
    var selStart = defaultText.selectionStart;
    var selEnd =  defaultText.selectionEnd;
    var selectedText;
    if(selStart != selEnd){
        selectedText = defaultText.value.substring(selStart, selEnd);                            
    }else{
        selectedText = null;
    }
    return {            
        selStart: selStart,
        defaultText: defaultText,
        selEnd: selEnd,
        selectedText: selectedText
    };
});    

}());

我调用此服务的指令。我已经在不同的文件中包含了主控制器内的服务。

(function(){
"use strict";
var wsApp = angular.module("WorkApp");
wsApp.directive("generalDirective", generalDirective);
function generalDirective(){
    return {
        scope: true,
        controller:function($scope, InputCheckService){
            $scope.collapsed = false;
            $scope.CollpasePanel = function(){
                $scope.collapsed = !$scope.collapsed;
            };
            $scope.updatePara = function(){
                alert(InputCheckService.defaultText+"Selection start: "+InputCheckService.selStart+" Selection End: "+ InputCheckService);
                /**
                 * defaultText: defaultText,
                    selStart: selStart,
                    selEnd: selEnd,
                    selectedText: selectedText
                 */
            }
        },
        templateUrl: 'directive/general-directive.html'
    };
}    

}());

如果您需要更多详细信息，请告诉我。

提前感谢您的时间和建议。

问候， 罗宾

Answer 1

您不应使用服务来操作DOM 元素。您应该只在directives 处操作DOM。你的问题是你DONT有任何地方可以收听TEXTAREA SELECTION EVENT，而且你的服务不会更新里面的数据。我为您的问题创建了一个fiddle。 watchSelection directive 基于来自 stackoverflow 的 answer。你应该注意的事情：

1. 我只使用服务来存储数据。 selStart、selEnd 或 paragraphContent 之类的东西，并提供一些 API 来检索数据

   .factory("InputCheckService", function () {
           return {
                  setSelStart: function (start) {
                       selStart = start;
                  },
                  .....
           },
   });
   

2. 在watchSelection directive 上，您watch 用于mouseup 事件并将执行update service 以便它存储您需要的值，稍后您可以从其他directives 或@ 检索它987654338@。

   elem.on('mouseup', function () {
   
       var start = elem[0].selectionStart;
   
       //store it to the service
       InputCheckService.setSelStart(start);
   });
   

3. 在您的generalDirective directive 中，您可以从您的service 中获取价值，angular 将自动为您更新视图。

希望对你有帮助。