javascript - Angular ui-router 每个state的过滤器应该怎么添加呢？

Question

正常是这样添加的

var app = angular.module('myapp', [
        'ui.bootstrap'
    ]).filter('reverse', function() {
        return function(items) {
            if(items) {
                return items.slice().reverse();
            } else {
                return [];
            }
        }
    }).filter('slice', function () {
        return function (inputArr, start, end) {
            var resultArr = [];
    
            if (!angular.isArray(inputArr)) { return inputArr; }
            if (start < 0) { start = 0; }
            if (end > inputArr.length) { end = inputArr.length; }
    
            for (var i = start; i < end; ++i) {
                resultArr.push(inputArr[i]);
            }
            return resultArr;
        };
    });

但是用了ui router就不知道filter该添加到哪里了

Answer 1

过滤器是可以全局使用的，为什么要给每个路由添加过滤器呢？

---

1.推荐把filter写在另一个js文件中，然后在你的页面中引用。
可以是下面这样：

  angular.module('myapp').filter('reverse', function() {
        return function(items) {
            if(items) {
                return items.slice().reverse();
            } else {
                return [];
            }
        }
    }).filter('slice', function () {
        return function (inputArr, start, end) {
            var resultArr = [];
    
            if (!angular.isArray(inputArr)) { return inputArr; }
            if (start < 0) { start = 0; }
            if (end > inputArr.length) { end = inputArr.length; }
    
            for (var i = start; i < end; ++i) {
                resultArr.push(inputArr[i]);
            }
            return resultArr;
        };
    });  

2.你也可以直接进行链式的调用，在那个文件下面写路由呀，可以是这样(这种方法不推荐，不利于维护。)：

    angular.module('myapp',[
        'ui.bootstrap'
    ]).filter('reverse', function() {
        return function(items) {
            if(items) {
                return items.slice().reverse();
            } else {
                return [];
            }
        }
    }).filter('slice', function () {
        return function (inputArr, start, end) {
            var resultArr = [];
    
            if (!angular.isArray(inputArr)) { return inputArr; }
            if (start < 0) { start = 0; }
            if (end > inputArr.length) { end = inputArr.length; }
    
            for (var i = start; i < end; ++i) {
                resultArr.push(inputArr[i]);
            }
            return resultArr;
        };
    }).config(function ($stateProvider, $urlRouterProvider) {
 
     $urlRouterProvider.when("", "/PageTab");
 
     $stateProvider
        .state("PageTab", {
            url: "/PageTab",
            templateUrl: "PageTab.html"
        })
        .state("PageTab.Page1", {
            url:"/Page1",
            templateUrl: "Page-1.html"
        })
        .state("PageTab.Page2", {
            url:"/Page2",
            templateUrl: "Page-2.html"
        })
        .state("PageTab.Page3", {
            url:"/Page3",
            templateUrl: "Page3.html"
        });
});