Làm cách nào để gửi và truy xuất các tham số bằng cách sử dụng $ state.go toParams và $ stateParams?

Tôi đang sử dụng AngularJS v1.2.0-rc.2 với ui-router v0.2.0. Tôi muốn vượt qua tình trạng giới thiệu sang tiểu bang khác vì vậy tôi sử dụng toParamscác $state.gogiống như vậy:

$state.go('toState', {referer: $state.current.name});

Theo các tài liệu , điều này sẽ đưa $stateParamsvào toStatebộ điều khiển, nhưng nó là undefined. Tôi đang thiếu gì?

Tôi đã tạo ra một plunk để chứng minh:

http://plnkr.co/edit/ywEcG1

Nếu bạn muốn chuyển trạng thái không phải URL, thì bạn không được sử dụng urlkhi thiết lập state. Tôi tìm thấy câu trả lời trên một PR và làm một số trò đùa xung quanh để hiểu rõ hơn.

$stateProvider.state('toState', {
  templateUrl:'wokka.html',
  controller:'stateController',
  params: {
    'referer': 'some default', 
    'param2': 'some default', 
    'etc': 'some default'
  }
});

Sau đó, bạn có thể điều hướng đến nó như vậy:

$state.go('toState', { 'referer':'jimbob', 'param2':37, 'etc':'bluebell' });

Hoặc là:

var result = { referer:'jimbob', param2:37, etc:'bluebell' };
$state.go('toState', result);

Và trong HTML cũng vậy:

<a ui-sref="toState(thingy)" class="list-group-item" ng-repeat="thingy in thingies">{{ thingy.referer }}</a>

Ca sử dụng này hoàn toàn chưa được khám phá trong tài liệu, nhưng tôi nghĩ đó là một phương tiện mạnh mẽ để chuyển trạng thái mà không sử dụng URL.

Giải pháp của Nathan Matthews không hiệu quả với tôi nhưng nó hoàn toàn chính xác nhưng có rất ít điểm để đạt được một cách giải quyết:

Điểm mấu chốt là: Loại tham số được xác định và toParamas của $ state.go phải là cùng một mảng hoặc đối tượng trên cả hai mặt của quá trình chuyển đổi trạng thái.

Ví dụ: khi bạn xác định tham số trong trạng thái như sau, bạn có nghĩa là thông số là mảng vì sử dụng "[]":

$stateProvider
.state('home', {
    templateUrl: 'home',
    controller:  'homeController'
})
.state('view', {
    templateUrl: 'overview',
    params:      ['index', 'anotherKey'],
    controller:  'overviewController'
})

Vì vậy, bạn cũng nên truyền toParams dưới dạng mảng như thế này:

params = { 'index': 123, 'anotherKey': 'This is a test' }
paramsArr = (val for key, val of params)
$state.go('view', paramsArr)

Và bạn có thể truy cập chúng thông qua $ stateParams dưới dạng mảng như thế này:

app.controller('overviewController', function($scope, $stateParams) {
    var index = $stateParams[0];
    var anotherKey = $stateParams[1];
});

Giải pháp tốt hơn là sử dụng đối tượng thay vì mảng ở cả hai bên :

$stateProvider
.state('home', {
    templateUrl: 'home',
    controller:  'homeController'
})
.state('view', {
    templateUrl: 'overview',
    params:      {'index': null, 'anotherKey': null},
    controller:  'overviewController'
})

Tôi đã thay thế [] bằng {} trong định nghĩa params. Để chuyển toParams sang $ state.go, bạn cũng nên sử dụng đối tượng thay vì mảng:

$state.go('view', { 'index': 123, 'anotherKey': 'This is a test' })

sau đó bạn có thể truy cập chúng thông qua $ stateParams một cách dễ dàng:

app.controller('overviewController', function($scope, $stateParams) {
    var index = $stateParams.index;
    var anotherKey = $stateParams.anotherKey;
});

Tất cả những gì tôi phải làm là thêm một tham số vào định nghĩa trạng thái url như vậy

url: '/toState?referer'

Đừng!

Không chắc chắn nếu nó sẽ hoạt động với AngularJS v1.2.0-rc.2 với ui-router v0.2.0. Tôi đã thử nghiệm giải pháp này trên AngularJS v1.3.14 với ui-router v0.2.13.

Tôi chỉ nhận ra rằng không cần thiết phải truyền tham số trong URL như gwhn khuyến nghị.

Chỉ cần thêm các tham số của bạn với một giá trị mặc định trên định nghĩa trạng thái của bạn. Trạng thái của bạn vẫn có thể có giá trị Url.

$stateProvider.state('state1', {
    url : '/url',
    templateUrl : "new.html",
    controller : 'TestController',
    params: {new_param: null}
});

và thêm thông số vào $state.go()

$state.go('state1',{new_param: "Going places!"});

Không có ví dụ nào trên trang này làm việc cho tôi. Đây là những gì tôi đã sử dụng và nó hoạt động tốt. Một số giải pháp cho biết bạn không thể kết hợp url với $ state.go () nhưng điều này không đúng. Điều khó xử là bạn phải xác định các thông số cho url và cũng liệt kê các thông số. Cả hai phải có mặt. Đã thử nghiệm trên Angular 1.4.8 và UI Router 0.2.15.

Trong trạng thái thêm thông số của bạn vào cuối trạng thái và xác định thông số:

url: 'view?index&anotherKey',
params: {'index': null, 'anotherKey': null}

Trong bộ điều khiển của bạn, câu lệnh go của bạn sẽ trông như thế này:

$state.go('view', { 'index': 123, 'anotherKey': 'This is a test' });

Sau đó, để kéo các thông số ra và sử dụng chúng trong bộ điều khiển của trạng thái mới của bạn (đừng quên chuyển $ stateParams cho chức năng điều khiển của bạn):

var index = $stateParams.index;
var anotherKey = $stateParams.anotherKey;
console.log(anotherKey); //it works!

Trong trường hợp của tôi, tôi đã thử với tất cả các tùy chọn được đưa ra ở đây, nhưng không ai hoạt động đúng (góc 1.3.13, ionic 1.0.0, angular-ui-router 0.2.13). Giải pháp là:

.state('tab.friends', {
      url: '/friends/:param1/:param2',
      views: {
        'tab-friends': {
          templateUrl: 'templates/tab-friends.html',
          controller: 'FriendsCtrl'
        }
      }
    })

và trong trạng thái.go:

$state.go('tab.friends', {param1 : val1, param2 : val2});

Chúc mừng

Tôi đã dành rất nhiều thời gian để chiến đấu với $ state & $ stateParams của Ionic / Angular;

Để sử dụng $ state.go () và $ stateParams, bạn phải có một số thứ nhất định thiết lập và các tham số khác không được có mặt.

Trong app.config () của tôi, tôi đã bao gồm $ stateProvider và được xác định trong một số trạng thái:

$stateProvider
    .state('home', {
        templateUrl: 'home',
        controller:  'homeController'
    })
    .state('view', {
        templateUrl: 'overview',
        params:      ['index', 'anotherKey'],
        controller:  'overviewController'
    })

Các paramsĐiều quan trọng là đặc biệt quan trọng. Đồng thời, lưu ý rằng KHÔNG có urlkhóa nào hiện diện ... sử dụng stateParams và URL KHÔNG trộn lẫn. Họ là loại trừ lẫn nhau.

Trong lệnh gọi $ state.go (), hãy định nghĩa nó như sau:

$state.go('view', { 'index': 123, 'anotherKey': 'This is a test' })

Các biến indexvà anotherKey$ stateParams sẽ CHỈ được điền nếu chúng được liệt kê đầu tiên trong paramskhóa xác định $ stateControll .

Trong bộ điều khiển, bao gồm $ stateParams như minh họa:

app.controller('overviewController', function($scope, $stateParams) {
    var index = $stateParams.index;
    var anotherKey = $stateParams.anotherKey;
});

Các biến đã qua nên có sẵn!

Thử với reload: true?

Không thể hiểu chuyện gì đang diễn ra trong thời gian dài nhất - hóa ra tôi đang tự lừa mình. Nếu bạn chắc chắn rằng mọi thứ được viết chính xác và bạn sẽ sử dụng cùng một trạng thái, hãy thử reload: true:

.state('status.item', {
    url: '/:id',
    views: {...}
}

$state.go('status.item', { id: $scope.id }, { reload: true });

Hy vọng điều này giúp bạn tiết kiệm thời gian!

Tôi đã đối mặt với một vấn đề tương tự. Tôi đã kết thúc với một giải pháp làm việc sau rất nhiều googling và thử nghiệm và thử nghiệm. Đây là giải pháp của tôi sẽ làm việc cho bạn.

Tôi có hai bộ điều khiển - searchBoxContoder và stateResultControll và một tham số có tên searchQuery được truyền từ một khung nhìn có hộp tìm kiếm sang một khung nhìn hiển thị các kết quả được tìm nạp từ máy chủ từ xa. Đây là cách bạn làm điều đó:

Dưới đây là bộ điều khiển mà bạn gọi chế độ xem tiếp theo bằng cách sử dụng $state.go()

.controller('searchBoxController', function ($scope, $state) {
        $scope.doSearch = function(){
            var searchInputRaw = $scope.searchQueryInput;
            $state.go('app.searchResults', { searchQuery: searchInput });
        }
    })

Dưới đây là trạng thái sẽ được gọi khi $state.go()được thực thi:

.state('app.searchResults', 
            {
                url: '/searchResults',
                views:
                {
                    'menuContent': { templateUrl: 'templates/searchResult.html', controller: 'stateResultController' }
                },
                params: 
                {
                    'searchQuery': ''
                }
            })

Và cuối cùng, bộ điều khiển liên quan đến app.searchResultstrạng thái:

.controller('stateResultController', function ($scope, $state, $stateParams, $http) {
        $scope.searchQueryInput = $stateParams.searchQuery;
    });

Và trong trường hợp của tôi về tình trạng cha mẹ / con cái. tất cả các tham số được khai báo ở trạng thái con phải được biết bởi trạng thái cha

        .state('full', {
            url: '/full',
            templateUrl: 'js/content/templates/FullReadView.html',
            params: { opmlFeed:null, source:null },
            controller: 'FullReadCtrl'
        })
        .state('full.readFeed', {
            url: '/readFeed',
            views: {
                'full': {
                    templateUrl: 'js/content/templates/ReadFeedView.html',
                    params: { opmlFeed:null, source:null },
                    controller: 'ReadFeedCtrl'
                }
            }
        })

Giải pháp chúng tôi đã có một trạng thái có 2 tham số đang thay đổi:

.state('somestate', {
  url: '/somestate',
  views: {...}
}

đến

.state('somestate', {
  url: '/somestate?id=:&sub=:',
  views: {...}
}

Xác định của bạn sau trong router.js

$stateProvider.state('users', {
    url: '/users',
    controller: 'UsersCtrl',
    params: {
        obj: null
    }
})

Bộ điều khiển của bạn cần thêm $ stateParams.

function UserCtrl($stateParams) {
    console.log($stateParams);
}

Bạn có thể gửi một đối tượng theo tham số như sau.

$state.go('users', {obj:yourObj});

Tôi đã cố gắng điều hướng từ Trang 1 đến 2 và tôi cũng phải truyền một số dữ liệu.

Trong router.js của tôi , tôi đã thêm tên và tuổi của params :

.state('page2', {
          url: '/vehicle/:source',
          params: {name: null, age: null},
.................

Trong Trang1 , onClick của nút tiếp theo:

$state.go("page2", {name: 'Ron', age: '20'});

Trong trang 2 , tôi có thể truy cập các thông số đó:

$stateParams.name
$stateParams.age

Nếu đây là một tham số truy vấn mà bạn muốn vượt qua như thế này: /toState?referer=current_user

sau đó bạn cần mô tả trạng thái của bạn như thế này:

$stateProvider.state('toState', {
  url:'toState?referer',
  views:{'...'}
});

nguồn: https://github.com/angular-ui/ui-router/wiki/URL-Routing#query-parameter