Question

我有标题和内容的抽象状态（真的app有任何布局，但我简化了代码示例）。标题有过滤器，我想通过点击过滤器类别动态更改位置网址。它工作但停了下来，我不知道为什么......

我使用类似的代码：

$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');
    }]);

})();

但我不明白，为什么国家路由器不会改变位置。

更新：

http://plnkr.co/edit/3GE2pkllzSEi5V9YdBoG?p=preview

Answer 1

它适用于plnkr因为没有错误 - 在toggleFilter函数中我做了$ state.params = newParams;和ui-router没有变化，因为参数是相同的。

我认为这将是ui-router使用的好例子：

    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);
  });
})

http://plnkr.co/edit/3GE2pkllzSEi5V9YdBoG?p=preview

Angular ui-router不会改变位置

1 个答案: