AngularJS - Невозможно получить стоимость с заводского обслуживания

Question

Я очень много нового в AngularJS и из-за которого я столкнулся с проблемой и не в состоянии понять точную проблему. Код, который я пробовал, работает в нормальном javascript-коде, но теперь я хочу использовать пользовательскую услугу (заводская функция). На самом деле, у меня есть textarea, где пользователь может вводить свой текст, а затем они могут делать форматирование, выбирая любой текст. (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 элементом. Вы должны манипулировать DOM только в directives. Ваша проблема в том, что вы DONT есть где послушать TECTAREA SELECTION EVENT, и ваша служба не будет обновлять данные внутри. Я создал fiddle для вашей проблемы. watchSelection directive основан на этом answer из stackoverflow. Что-то, что вы должны заметить:

1. Я использую сервис только для хранения данных. Что-то вроде selStart, selEnd или paragraphContent и предоставить некоторые API для извлечения данных

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

2. На 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); 
   }); 
   

3. В вашем generalDirective directive вы можете получить отдачу от service и angular обновит автоматически вид для вас.

Надеюсь, это поможет.