Angularjs 角度用户界面路由器不'；不要改变位置

我有标题和内容的抽象状态（实际上应用程序有任何布局，但我简化了代码示例）。标题有筛选器，我想通过单击筛选器类别动态更改位置url。它正在工作，但停止了，我不知道为什么

我使用了类似的代码：

$stateProvider
    .state('root', {
        url: '',
        abstract: true,
        views: {
            '@': {
                templateUrl: 'templates/layout.html',
                controller: 'LayoutCtrl'
            },
            'header@root': {
                templateUrl: 'templates/header.html',
                controller: 'HeaderCtrl'    
            }
        }
    })
    .state('root.index', {
        url: 'index?{filter}'
    })
});


(function() {
    'use strict';

    Test.app.controller('LayoutCtrl', ['$scope', '$state' function($scope, $state) {
        $scope.params = $state.params;

        $scope.$on('params.changed', function($event) {
            $state.go($state.$current, $scope.params);
            // also tried to use
            // $state.go($state.current.name, $scope.params);
        });
    }]);

})();

(function() {
    'use strict';

    Test.app.controller('HeaderCtrl', ['$scope', '$state' function($scope, $state) {
        // event handler do some tasks and rewrite $scope.params
        $scope.params = {
            filter: [1, 2, 7, 15]
        };
        // also tried to sent new data in event params
        $scope.$emit('params.changed');
    }]);

})();

但我不明白，为什么ui状态路由器不改变位置

更新：

---

它在plnkr上工作，因为没有错误-在toggleFilter函数中，我使用了$state.params=newParams；ui路由器没有改变，因为参数是相同的

我认为这将是ui路由器的一个很好的例子，使用：

    angular.module('MyApp', [
  'ui.router'
])
.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/index?filter=1');

    $stateProvider
        .state('root', {
          url: '',
          abstract: true
        })
        .state('root.base', {
          url: '',
          abstract: true,
          views: {
            '@': {
              templateUrl: 'layout.html',
              controller: 'rootController'
            },
            'header@root.base': {
              templateUrl: 'header.html',
              controller: 'HeaderCtrl'
            }
          }
        })
        .state('root.base.1', {
          url: '/index?{filter}'
        })
})
.controller('rootController', function($scope, $state){
  // when we went to page with filter = 1
  // it will be object with filter = 1
  $scope.params = $state.params;
  $scope.$on('filter.changed', function($event, data) {
    $scope.params = data;
    console.log($scope.params);
    $state.go($state.$current, $scope.params);
  });
})
.controller('HeaderCtrl', function($scope){
  $scope.filters = [
    {
      key: '1',
      value: 1,
      selected: false
    },
    {
      key: '2',
      value: 2,
      selected: false
    },
    {
      key: '3',
      value: 3,
      selected: false
    },
    {
      key: '4',
      value: 4,
      selected: false
    },
    {
      key: '5',
      value: 5,
      selected: false
    }
  ];

  $scope.toggleFilter = function(filter) {
    filter.selected = !filter.selected;

    var selectedFilters = [],
        filterLength = $scope.filters.length;

    for (var i = 0; i < filterLength; i++) {
      $scope.filters[i].selected && selectedFilters.push($scope.filters[i].value);
    }

    $scope.$emit('filter.changed', {
      id: 1,
      filter: selectedFilters
    });
  };
})
.run(function($rootScope, $location) {
  $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
    console.log(fromState);
    console.log('$stateChangeSuccess');
    console.log($location.absUrl());
    console.log(toState);
  });
})

angular.module（'MyApp'[
“ui.router”
])
.config（函数（$stateProvider，$urlRouterProvider）{
$urlRouterProvider。否则（'/index？filter=1'）；
$stateProvider
.state（'根'{
url:“”，
摘要：没错
})
.state（'root.base'{
url:“”，
摘要：没错，
观点：{
'@': {
templateUrl:'layout.html'，
控制器：“rootController”
},
'header@root.base': {
templateUrl:'header.html'，
管制员：'HeaderCtrl'
}
}
})
.state（'root.base.1'{
url:“/index？{filter}”
})
})
.controller（'rootController'，函数（$scope，$state）{
//当我们转到filter=1的页面时
//它将是筛选器为1的对象
$scope.params=$state.params；
$scope.$on（'filter.changed'，函数（$event，data）{
$scope.params=数据；
console.log（$scope.params）；
$state.go（$state.current，$scope.params）；
});
})
.controller（'HeaderCtrl'，函数（$scope）{
$scope.filters=[
{
键：“1”，
价值：1，
所选：false
},
{
键：“2”，
价值：2，
所选：false
},
{
键：“3”，
价值：3，
所选：false
},
{
键：“4”，
价值：4，
所选：false
},
{
键：“5”，
数值：5，
所选：false
}
];
$scope.toggleFilter=函数（过滤器）{
filter.selected=！filter.selected；
var selectedFilters=[]，
filterLength=$scope.filters.length；
对于（变量i=0；i

---

创建plnkr以更好地理解PLNHKR的创建，它在那里工作：）我想说它正在改变位置：