Angular service slugify scopes - angularjs

Question

I am slugify function running smoothly.
What bothers me is having to repeat the function code in all controllers.
There is the possibility of converting into a service, or otherwise I write only once this function?
Today use of this form:
<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>
my slugify function:
$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;
};
SOLUTION HERE! 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;
});
And in controllers:
$scope.slugIt = function(title){
$scope.product.slug = slugify.generate(title);
};
And in views:
<input ng-model="product.title" ng-change="slugIt(product.title)">

Answer 1

You could create a directive, that uses the service to generate a slug.
.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');
});
}
}
});
Usage:
Anywhere in your app,
<input ng-model="product.title" slug-input>

Answer 2

I don't know your exact requirement. But, you can write a service something like this
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
//assuming the service is used once per page