角度服务slugify示波器

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：

.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>