angular UI 라우터| $stateParams가 동작하지 않음

angular UI 라우터| $stateParams가 동작하지 않음

인 것 같다$stateParams동작하지 않습니다.이렇게 지나가는 날짜:

$state.go('state2', { someParam : 'broken magic' });

대상 상태에서 무시되는 매개 변수

console.log('state2 params:', $stateParams); // return empty object {}

코드:

    var app = angular.module('app', [
     'ui.router'
    ]);

    app.config(function($stateProvider) {
      $stateProvider
            .state('state1', {
                url: '',
                templateUrl: 'state-1.html',
                controller : function ($scope, $state, $stateParams) {
                  $scope.go = function () {
                    $state.go('state2', { someParam : 'broken magic' });
                  };

                  console.log('state1 params:', $stateParams);
                }
            })
            .state('state2', {
                url: 'state2',
                templateUrl: 'state-2.html',
                controller : function ($scope, $state, $stateParams) {
                  $scope.go = function () {
                    $state.go('state1', { someOtherParam : 'lazy lizard' });
                  };

                  console.log('state2 params:', $stateParams);
                }
            });
    });

실제 예는 여기에서 찾을 수 있습니다.

감사해요.

상태 간에 임의의 파라미터를 전달할 수 없습니다.상태의 일부로 정의할 필요가 있습니다.$stateProvider정의.예.

$stateProvider
    .state('contacts.detail', {
        url: "/contacts/:contactId",
        templateUrl: 'contacts.detail.html',
        controller: function ($stateParams) {
            console.log($stateParams);
        }
    }) ...

위의 명령어는 contactId 속성이 정의된 개체를 출력합니다.에 가면/contacts/42,당신의.$stateParams될 것이다{contactId: 42}.

상세한 것에 대하여는, UI 라우터 URL 라우팅의 메뉴얼을 참조해 주세요.

URL에서 매개 변수를 정의하지 않으려면 전환 중인 상태의 매개 변수 속성을 포함해야 합니다.그렇지 않으면 데이터는 $stateParams 개체에서 삭제됩니다.params 객체의 형식은 이전 버전의 angular-ui-router에서는 문자열 배열입니다.새로운 버전에서는 빈 객체의 객체입니다.

params: { id: {}, blue: {}}

다음의 예를 참조해 주세요.

$stateProvider.state('state1', {
    url: '',
    params: {
        id: 0,
        blue: ''
    },
    templateUrl: 'state-1.html',
    controller: function($scope, $state, $stateParams) {
        $scope.go = function() {
            $state.go('state2', {
                id: 5,
                blue: '#0000FF'
            });
        };

        console.log('state params:', $stateParams);
    }
});

관련 질문: Angular의 UI 라우터에 URL이 없는 상태의 파라미터JS

어떤 상태에 매개 변수를 전달하는 것만으로는 충분하지 않습니다.파라미터는 name별로 명시적으로 정의해야 합니다.url국가 소유물입니다.

이렇게 하지 않으면 UI 라우터는 이 상태가 매개 변수를 필요로 하는 것을 인식하지 못합니다.$stateParams개체는 원하는 대로 채워지지 않습니다.

다음은 매개 변수를 예상하도록 상태를 수정하는 방법의 예입니다.$stateParams위의 파라미터를 사용하여 작업을 수행합니다.

$stateProvider.state('state1', {
        url: '',
        templateUrl: 'state-1.html',
        controller : function ($scope, $state, $stateParams) {
          $scope.params = $stateParams;
          $scope.go = function () {
            $state.go('state2', { id : 'broken magic' });
          };

          console.log('state1 params:', $stateParams);
        }
    })

    .state('state2', {
            url: 'state2/:id',
            templateUrl: 'state-2.html',
            controller : function ($scope, $state, $stateParams) {
              $scope.params = $stateParams;
              $scope.go = function () {
                $state.go('state1', { someOtherParam : 'lazy lizard' });
              };

              console.log('state2 params:', $stateParams);
            }
        })

다음은 jsfiddle의 상태 매개 변수를 전달하는 작업 예입니다.

위의 솔루션은 동작하지만, 제 경우 쿼리 파라미터를 전달해야 했기 때문에 다음과 같이 처리했습니다.

$stateProvider
        .state('state1', {
            url: '/state1?other',
            templateUrl: 'state-1.html',
            controller : function ($scope, $state, $stateParams) {
              $scope.params = $stateParams;
              $scope.go = function () {
                $state.go('state2', { someParam : 'broken magic' });
              };

              console.log('state1 params:', $stateParams);
            }
        })
        .state('state2', {
            url: '/state2?someParam',
            templateUrl: 'state-2.html',
            controller : function ($scope, $state, $stateParams) {
              $scope.params = $stateParams;
              $scope.go = function () {
                $state.go('state1', { other : 'lazy lizard' });
              };

              console.log('state2 params:', $stateParams);
            }
        });

이동수단을 만들어서 사용하세요!

angular_app.factory('$$transport', function($q) {
    var transport;
    return transport = {
        dfr: $q.defer(),
        push: function(v) {
            return transport.dfr.resolve(v);
        },
        then: function(s, f) {
            if (f == null) {
                f = function() {};
            }
            return transport.dfr.promise.then(function(_s) {
                s(_s);
                transport.dfr = $q.defer();
                return transport.then(s, f);
            }, function(_f) {
                f(_f);
                transport.dfr = $q.defer();
                return transport.then(s, f);
            });
        }
    };
});
$stateProvider.state('state1', {
            url: '/state1?other',
            templateUrl: 'state-1.html',
            controller : function ($scope, $state, $$transport) {
              $$transport.then(function(s) {
                $scope.param = s
                console.log('state1 params:', s);
              });
              $scope.go = function () {
                $state.go('state2', { someParam : 'broken magic' });
              }
            }
        })
        .state('state2', {
            url: '/state2?someParam',
            templateUrl: 'state-2.html',
            controller : function ($scope, $state, $$transport) {
              $scope.go = function () {
                $$transport.push({other:'lazy lizard'});
                $state.go('state1');
              };
            }
        });

언급URL : https://stackoverflow.com/questions/22610787/angular-ui-router-stateparams-not-working