source

각도: $routeProvider에서 컨트롤러로의 파라미터 전달

itover 2023. 2. 26. 09:40
반응형

각도: $routeProvider에서 컨트롤러로의 파라미터 전달

동일한 컨트롤러를 호출하는 여러 루트가 있으며 다른 변수를 컨트롤러에 전달하고 싶습니다.

// Example
$routeProvider.
  when('/a', {
    templateUrl: 'test.html',
    controller: 'MyController' // should get passed 'exampleA'
  }).
  when('/b', {
    templateUrl: 'test.html',
    controller: 'MyController' // should get passed 'exampleB'
});

"해결" 개체를 사용할 수 있습니다.

$routeProvider.
  when('/a', {
    templateUrl: 'test.html',
    controller: 'MyController',
    resolve: {test: function() { return true; }}
});

값을 종속성으로 전달하려면:

app.controller('MyController', ['$scope', 'test', function ($scope, test) {
  console.log(test); // true
}

이 접근법의 문제점은 해결 개체가 다른 경로에서 누락되어 있는 경우 앱이 크래시되어 옵션인 매개 변수를 전달하고 싶다는 것입니다.

(루트 프로바이더로부터) 컨트롤러에 특정 파라미터를 전달할 수 있는 방법이 있습니까?


감사해요.

라우팅:

$routeProvider.
  when('/a', {
    templateUrl: 'test.html',
    controller: 'MyController',
    paramExample: 'exampleA'
  }).
  when('/b', {
    templateUrl: 'test.html',
    controller: 'MyController',
    paramExample: 'exampleB'
});

액세스: 컨트롤러에 $route를 삽입한 후 이를 사용합니다.

 app.controller('MyController', ['$scope', '$route', function ($scope, $route) {
      var paramValue = $route.current.$$route.paramExample;
      console.log(paramValue); 
 }

resolution을 사용할 수 있습니다.$route.currrent.params.test다음과 같이 파라미터를 전달합니다.

$routeProvider
  .when('/a', {
    templateUrl: 'view.html',
    controller: 'MainCtrl',
    resolve: {
        test: function ($route) { $route.current.params.test = true; }
    }
  })
  .when('/b', {
    templateUrl: 'view.html',
    controller: 'MainCtrl',
    resolve: {
        test: function ($route) { $route.current.params.test = false; }
    }
  })

그런 다음 컨트롤러에서 $routeParams에서 액세스할 수 있습니다.

app.controller('MainCtrl', function($scope, $routeParams) {
  $scope.test = $routeParams.test;
})

http://plnkr.co/edit/ct1ZUI9DNqSZ7S9OZJdO?p=preview

가장 자연스러운 방법은 파라미터를 사용하여 페이지를 로드할 때 보통 수행하는 작업입니다. 쿼리 매개 변수를 사용합니다.http://yoururl.com?param1=value&param2=value

ngRoute에는 컨트롤러에 삽입할 수 있는 $routeParams 서비스가 포함되어 있습니다.이렇게 간단하게 값을 검색할 수 있습니다.$routeParams.param1.

또 다른 방법은 다음과 같이 경로를 가져오는 것입니다.$location.path변수를 설정합니다.

$routeParams 사용

기본 js 파일에서

routeApp.config(function($routeProvider) {
$routeProvider
    .when('/home', {
        templateUrl: '../sites/./home.html',
        controller: 'StudentController'
    })
    .when('/viewStudents/:param1/:param2', {
        templateUrl: '../sites/./viewStudents.html',
        controller: 'StudentController'
    })
    .otherwise({
        redirectTo: '/'
    });
 });

 routeApp.controller('StudentController',['$filter','$routeParams', '$location',function($filter,$routeParams,$location){
   var StudentCtrl = this;  
   StudentCtrl.param1 = $routeParams.param1;
   StudentCtrl.param2 = $routeParams.param2;
 }]);

호출, Home.html에서

 <div class="container">
   <h2> Welcome </h2>
   <a href="#/viewStudents/myname/somevalue2">Students</a>
</div>

언급URL : https://stackoverflow.com/questions/27533386/angular-passing-params-from-routeprovider-to-controller

반응형