AngularJS

Question

我是 AngularJS 的新手，因此我遇到了一个问题，无法理解确切的问题。我尝试的代码在正常 javascript 代码中工作，但现在我想使用自定义服务（工厂函数）。实际上，我有一个文本区域，用户可以在其中输入他们的文本，然后他们可以通过 selecting 任何文本来进行格式化。（discovertheweb.in/woweditor - 这是我创建的现有站点，现在我想在此代码中应用 angular）。现在，我创建了一个自定义服务来检查用户 select 是否有任何内容。我在我的自定义服务中使用了以下代码并尝试获取 selection 起点和终点，以便我可以从 textarea 字段中获取 selected 文本。但是，问题是我得到的 selection 起点和终点的值为 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 并且你的服务不会更新里面的数据。我从 Whosebug 创建了一个 fiddle for your problem. The watchSelection directive is based on this answer。您应该注意的事项：

我使用服务只是为了存储数据。类似于 selStart、selEnd 或 paragraphContent 并提供一些 API 来检索数据

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

在 watchSelection directive 上，您 watch 为 mouseup 事件执行 update service 以便它会存储您需要的值，稍后您可以从其他 directives 或 controllers 检索它。
```
elem.on('mouseup', function () {

    var start = elem[0].selectionStart;

    //store it to the service
    InputCheckService.setSelStart(start);
});
```
在您的 generalDirective directive 中，您可以从 service 中获取值，并且 angular 会自动为您更新视图。

希望对您有所帮助。

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

AngularJS - Not able to get value from factory service

service

factory