Угловое обслуживание slugify scopes

Question

Функция slugify работает плавно.

Меня беспокоит необходимость повторить код функции во всех контроллерах.

Есть возможность преобразования в службу или иначе я пишу только после этой функции?

Сегодня использование этой формы:

<md-input-container class="md-accent"> 
    <label >Digite o título do Produto</label> 
    <input ng-model="product.title" ng-change="slugify(product.title)"> 
</md-input-container> 

<md-input-container class="md-accent"> 
    <label>Link permanente</label> 
    <input ng-model="product.slug" disabled> 
</md-input-container> 

моя slugify функция:

$scope.slugify = function(slug){ 
    var makeString = function(object) { 
     if (object === null) { 
      return ''; 
     } 
     return '' + object; 
    }; 

    var from = 'ąàáäâãåæăćčĉęèéëêĝĥìíïîĵłľńňòóöőôõðøśșšŝťțŭùúüűûñÿýçżźž', 
     to = 'aaaaaaaaaccceeeeeghiiiijllnnoooooooossssttuuuuuunyyczzz', 
     regex = new RegExp('[' + from + ']', 'g'); 

    slug = makeString(slug).toString().toLowerCase().replace(regex, function (c){ 
     var index = from.indexOf(c); 
     return to.charAt(index) || '-'; 
    }).replace(/[^\w\-\s]+/g, '').trim().replace(/\s+/g, '-').replace(/\-\-+/g, '-'); 

    $scope.product.slug = slug; 
}; 

РЕШЕНИЕ ЗДЕСЬ! ФАБРИКА:

.factory('slugify', function() { 
    var self = this; 
    self.generate = function(slug){ 
     var makeString = function(object) { 
      if (object === null) { 
       return ''; 
      } 
      return '' + object; 
     }; 

     var from = 'ąàáäâãåæăćčĉęèéëêĝĥìíïîĵłľńňòóöőôõðøśșšŝťțŭùúüűûñÿýçżźž', 
      to = 'aaaaaaaaaccceeeeeghiiiijllnnoooooooossssttuuuuuunyyczzz', 
      regex = new RegExp('[' + from + ']', 'g'); 

     slug = makeString(slug).toString().toLowerCase().replace(regex, function (c){ 
      var index = from.indexOf(c); 
      return to.charAt(index) || '-'; 
     }).replace(/[^\w\-\s]+/g, '').trim().replace(/\s+/g, '-').replace(/\-\-+/g, '-'); 
     return slug; 
    }; 
    return self; 
}); 

И в контроллерах:

$scope.slugIt = function(title){ 
    $scope.product.slug = slugify.generate(title); 
}; 

И в просмотрах:

<input ng-model="product.title" ng-change="slugIt(product.title)"> 

Answer 1

Я не знаю точное требование. Но, вы можете написать в службу что-то вроде этого

angular.module('app').service('slugService', 
    function() { 
     function serviceInstance() { 
      var services = { 
       slugify: slugify, 
       slug: slug 
      }; 

      var slug = null; 

      function slugify(slug) { 
       var makeString = function (object) { 
        if (object === null) { 
         return ''; 
        } 
        return '' + object; 
       }; 

       var from = 'ąàáäâãåæăćčĉęèéëêĝĥìíïîĵłľńňòóöőôõðøśșšŝťțŭùúüűûñÿýçżźž', 
        to = 'aaaaaaaaaccceeeeeghiiiijllnnoooooooossssttuuuuuunyyczzz', 
        regex = new RegExp('[' + from + ']', 'g'); 

       this.slug = makeString(slug).toString().toLowerCase().replace(regex, function (c) { 
         var index = from.indexOf(c); 
         return to.charAt(index) || '-'; 
        }) 
        .replace(/[^\w\-\s]+/g, '') 
        .trim().replace(/\s+/g, '-') 
        .replace(/\-\-+/g, '-'); 

      } 

      return services; 
     } 

     return new serviceInstance(); 
    } 
); 

//inject the service in your controller 
angular.module('app').controller('urController', function(slugService){ 


} 

and use it in your view 

ng-change(slugService.slugify(product.title)) 

ng-model(slugService.slug) //probably need to use ng-init as well 

// предполагающей службы используется один раз на странице

Answer 2

Вы можете создать директиву, которая использует службу для создания слизняка.

.factory('slugger', function slugger() { 
    return { 
     generateSlug: generateSlug 
    }; 

    function generateSlug(input) { 
     var from = 'ąàáäâãåæăćčĉęèéëêĝĥìíïîĵłľńňòóöőôõðøśșšŝťțŭùúüűûñÿýçżźž'; 
     var to = 'aaaaaaaaaccceeeeeghiiiijllnnoooooooossssttuuuuuunyyczzz'; 
     var regex = new RegExp('[' + from + ']', 'g'); 

     input = makeString(input).toString().toLowerCase().replace(regex, function (c) { 
      var index = from.indexOf(c); 
      return to.charAt(index) || '-'; 
     }).replace(/[^\w\-\s]+/g, '').trim().replace(/\s+/g, '-').replace(/\-\-+/g, '-'); 

     return input; 
    } 

    function makeString(object) { 
     if (object === null) { 
      return ''; 
     } 

     return '' + object; 
    } 
}) 

.directive('slugInput', function (slugger) { 
    return { 
     require: 'ngModel', 
     link: function (scope, iElement, iAttrs, ngModelCtrl) { 
      iElement.on('input', function() { 
       ngModelCtrl.$setViewValue(slugger.generateSlug(iElement.val())); 
       ngModelCtrl.$render(); 
      }); 

      scope.$on('$destroy', function() { 
       iElement.off('input'); 
      }); 
     } 
    } 
}); 

Использование:

Везде в вашем приложении,

<input ng-model="product.title" slug-input>