UI-Router에서 ui-sref를 사용하여 컨트롤러에 매개변수를 전달하는 방법은 무엇입니까?

UI-Router에서 ui-sref를 사용하여 컨트롤러에 매개변수 전달

UI-Router에서 ui-sref를 통해 컨트롤러에 매개변수 전달 상태 간 데이터 공유에 중요한 요소입니다. 이 작업을 효과적으로 수행하는 방법은 다음과 같습니다.

시작하려면 아래 표시된 업데이트된 상태 정의에서 볼 수 있듯이 콜론 구문을 사용하여 매개변수 자리 표시자를 포함하도록 대상 상태의 URL을 정의합니다.

$stateProvider
.state('home', {
  url: '/:foo?bar',
  ...

이 예에서 'home' 상태는 URL 경로에 'foo' 및 'bar' 매개변수가 필요합니다.

다음으로 이러한 매개변수를 올바르게 수신하도록 컨트롤러를 조정하세요.

.controller('MainRootCtrl', function($scope, $state, $stateParams) {
  // ...
  var foo = $stateParams.foo; // Accessing 'fooVal'
  var bar = $stateParams.bar; // Accessing 'barVal'
  // ...

이 컨트롤러에서는 $stateParam 대신 $stateParams를 삽입하여 전달된 매개변수에 대한 액세스를 제공합니다.

또한 UI-Router는 상태 내의 'params' 객체를 통해 세분화된 매개변수 구성을 제공합니다. 정의. 이 옵션을 사용하면 기본값을 지정하고 유형 제약 조건을 적용하는 등의 작업을 수행할 수 있습니다.

예를 들어 다음 확장 매개변수 구성을 고려해 보세요.

.state('other', {
  url: '/other/:foo?bar',
  params: {
    foo: {
      value: 'defaultValue',
      squash: false,
    },
    bar: {
      array: true, // Treat bar as an array
    },
    hiddenParam: 'YES', // Not present in the URL
  },
  ...

이 구성은 기본 값을 정의하는 방법을 보여줍니다. 매개변수를 지정하고 URL에서 해당 동작을 제어합니다.

마지막으로 'ui-sref' 속성 또는 '$state.go()' 메소드를 사용하여 원하는 상태로 이동할 때 매개변수를 전달하는 것을 잊지 마세요.

<a ui-sref="other({foo: 'fooVal1', bar: 'barVal1'})">...</a>
$state.go('home', {foo: 'fooVal2', bar: 'barVal2'});

이 접근 방식을 구현하면 UI-Router에서 ui-sref를 사용하여 컨트롤러에 매개변수를 효율적으로 전달할 수 있으므로 AngularJS 애플리케이션 내에서 원활한 상태 전환과 데이터 공유가 보장됩니다.

위 내용은 UI-Router에서 ui-sref를 사용하여 컨트롤러에 매개변수를 전달하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!