$ State.go toParams ve $ stateParams kullanarak parametreler nasıl gönderilir ve alınır?

Ui-router v0.2.0 ile AngularJS v1.2.0-rc.2 kullanıyorum. Ben kullanmak yüzden başka bir devlete yönlendiren devlet geçmek istiyorum toParamsait $state.goşöyle:

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

Göre docs , bu doldurmak gerekir $stateParamsüzerinde toStatedenetleyici, ama öyle undefined. Neyi kaçırıyorum?

Göstermek için bir yığın yarattım:

http://plnkr.co/edit/ywEcG1

URL olmayan durumu geçirmek istiyorsanız, o urlzaman state. Cevabı bir PR'da buldum ve daha iyi anlamak için etrafta biraz maymunluk yaptım.

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

Sonra da şu şekilde gezinebilirsiniz:

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

Veya:

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

Ve HTML'de şu şekilde:

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

Bu kullanım durumu belgelerde tamamen ortaya çıkarılmıştır, ancak bunun URL'leri kullanmadan geçiş durumu için güçlü bir araç olduğunu düşünüyorum.

Nathan Matthews'in çözümü benim için işe yaramadı, ancak tamamen doğru, ancak geçici bir çözüme ulaşmanın çok az anlamı var:

Kilit nokta şudur: $ state.go'daki tanımlı parametrelerin türü ve toParamas, durum geçişinin her iki tarafında aynı dizi veya nesne olmalıdır.

Örneğin, bir durumda bir parametreyi aşağıdaki gibi tanımladığınızda, "[]" kullanılması nedeniyle parametrelerin dizi olduğu anlamına gelir:

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

Öyleyse, Params'a şu şekilde bir dizi olarak da geçmelisiniz:

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

Ve bunlara $ stateParams aracılığıyla aşağıdaki gibi bir dizi olarak erişebilirsiniz:

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

Daha iyi çözüm, her iki tarafta dizi yerine nesne kullanmaktır :

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

Params tanımında [] 'yı {} ile değiştirdim. ToParams'ı $ state.go'ya iletmek için ayrıca array yerine object kullanmalısınız:

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

daha sonra bunlara $ stateParams aracılığıyla kolayca erişebilirsiniz:

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

Tek yapmam gereken url durum tanımına böyle bir parametre eklemekti

url: '/toState?referer'

Doh!

Ui-router v0.2.0 ile AngularJS v1.2.0-rc.2 ile çalışıp çalışmayacağından emin değilim. Bu çözümü ui-router v0.2.13 ile AngularJS v1.3.14 üzerinde test ettim.

Gwhn'in önerdiği gibi URL'deki parametreyi geçirmek için gerekli olmadığını anlıyorum.

Parametrelerinizi, durum tanımınıza varsayılan bir değerle eklemeniz yeterlidir. Durumunuz hala bir URL değerine sahip olabilir.

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

ve parametreyi ekle $state.go()

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

Bu sayfadaki bu örneklerin hiçbiri benim için işe yaramadı. Kullandığım şey buydu ve iyi çalıştı. Bazı çözümler url'yi $ state.go () ile birleştiremeyeceğinizi söyledi, ancak bu doğru değil. Garip olan şey, url için parametreleri tanımlamanız ve ayrıca parametreleri listelemenizdir. İkisi de mevcut olmalıdır. Angular 1.4.8 ve UI Router 0.2.15'te test edilmiştir.

Gelen devlet devletin sonuna kadar params ekleyebilir ve params tanımlayın:

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

Senin içinde denetleyici sizin go deyimi aşağıdaki gibi görünecektir:

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

Ardından parametreleri çıkarmak ve bunları yeni eyaletinizin denetleyicisinde kullanmak için (denetleyici işlevinize $ stateParams'ı geçirmeyi unutmayın):

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

Benim durumumda burada verilen tüm seçenekleri denedim, ancak hiç kimse düzgün çalışmıyordu (açısal 1.3.13, ionic 1.0.0, açısal-ui-yönlendirici 0.2.13). Çözüm şuydu:

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

ve state.go içinde:

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

Şerefe

Ionic / Angular'ın $ state & $ stateParams; ile savaşarak epey zaman harcadım;

$ State.go () ve $ stateParams'ı kullanmak için belirli ayarlara sahip olmanız ve diğer parametrelerin mevcut olmaması gerekir.

App.config () dosyama $ stateProvider ekledim ve içinde birkaç durum tanımladım:

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

paramsAnahtar özellikle önemlidir. Ayrıca, urlstateParams kullanan HİÇBİR anahtar olmadığına dikkat edin ve URL'ler karışmaz. Birbirlerine karşılıklı olarak özeldirler.

$ State.go () çağrısında şu şekilde tanımlayın:

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

indexVe anotherKeyilk $ stateController listelenen eğer $ stateParams değişkenler SADECE doldurulur paramstanımlayan anahtarın.

Denetleyiciye, gösterildiği gibi $ stateParams ekleyin:

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

Aktarılan değişkenler mevcut olmalıdır!

Denemek reload: truemi?

En uzun süre neler olduğunu anlayamadım - kendimi kandırdığım ortaya çıktı. Bir şeylerin doğru yazıldığından eminseniz ve aynı durumu kullanacaksanız, şunu deneyin reload: true:

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

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

Umarım bu size zaman kazandırır!

Ben de benzer bir sorunla karşılaştım. Çok sayıda googling ve deneme ve testten sonra çalışan bir çözüm buldum. İşte sizin için işe yarayacak çözümüm.

İki denetleyicim var - searchBoxController ve stateResultController ve bir arama kutusu olan bir görünümden uzak bir sunucudan getirilen sonuçları gösteren bir görünüme geçirilecek searchQuery adlı bir parametre . Bunu nasıl yapıyorsun:

Aşağıda, bir sonraki görünümü kullanarak çağırdığınız denetleyici bulunmaktadır. $state.go()

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

Çalıştırıldığında çağrılacak durum aşağıdadır $state.go():

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

Ve son olarak, durumla ilişkilendirilen denetleyici app.searchResults:

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

Ve benim ebeveyn / çocuk durumumda. alt durumda bildirilen tüm parametreler, üst durum tarafından bilinmelidir

        .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'
                }
            }
        })

2 parametre alan bir duruma geldiğimiz çözüm değişiyordu:

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

için

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

Router.js'de aşağıdakileri tanımlayın

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

Denetleyicinizin $ stateParams eklemesi gerekiyor.

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

Aşağıdaki gibi parametreye göre bir nesne gönderebilirsiniz.

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

Sayfa 1'den 2'ye gitmeye çalışıyordum ve bazı verileri de iletmem gerekiyordu.

Benim içinde router.js , ben parametreler eklendi adını ve yaşını :

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

In Sayfa1 , sonraki düğmesinin onClick:

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

In Sayfa2'ye , ben bu params erişebilecek:

$stateParams.name
$stateParams.age

Bu, şu şekilde geçirmek istediğiniz bir sorgu parametresiyse: /toState?referer=current_user

o zaman durumunuzu şu şekilde tanımlamanız gerekir:

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

kaynak: https://github.com/angular-ui/ui-router/wiki/URL-Routing#query-parameters