Angularjs 角度服务缓动范围

我的slagify函数运行平稳

困扰我的是必须在所有控制器中重复功能代码

有可能转换成服务，或者我只写一次这个函数

今天使用此表格：

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

解决方案在这里！工厂：

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

---

我不知道您的确切要求。但是，您可以编写类似这样的服务

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

---

//假设该服务每页使用一次

我不知道您的确切要求。但是，您可以编写类似这样的服务

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

---

//假设服务每页使用一次

您可以创建一个指令，该指令使用服务生成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');
            });
        }
    }
});

用法：

在应用程序中的任何位置

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

---

您可以创建一个指令，该指令使用服务生成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');
            });
        }
    }
});

用法：

在应用程序中的任何位置

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

Hi，thax fast response，但返回此错误：错误：slug未定义编辑，错过在服务后添加slug=null。Hi，thax fast response，但返回此错误：错误：slug未定义编辑，错过在服务后添加slug=null。好主意，但是。。在我的情况下不起作用，我有两个输入，第一个是标题，第二个是永久链接，我要做的是当我输入标题时，他让我生成永久链接字段，并且slagify字段永久链接处于非活动状态。好主意，但是。。在我的情况下不起作用，我有两个输入，第一个是标题，第二个是永久链接，我要做的是当我输入标题时，他让我生成永久链接字段，并slugify该字段永久链接处于非活动状态。