AngularJS UI-Router에서 상태 간에 $scope 데이터를 공유하는 방법은 무엇입니까?

AngularJS UI-Router에서 상태 간 $scope 데이터 전달

AngularJS UI-Router에서 하위 상태 간 탐색은 상위 상태로부터 $scope 데이터를 자동으로 상속하지 않습니다. 제어 장치. 이는 상태 간에 데이터를 공유해야 할 때 문제가 될 수 있습니다.

중첩 뷰 상속

상태 간에 $scope 데이터를 공유하는 핵심은 UI-Router의 뷰 계층 구조에서 제공하는 상속 메커니즘을 사용하는 데 있습니다. 하위 뷰가 상위 뷰 내에 중첩되면 하위 범위는 상위 범위에서 속성을 상속합니다.

AngularJS 범위 상속 이해

AngularJS 범위는 프로토타입 방식으로 상속합니다. 즉, 하위 범위는 상위 범위의 속성과 메서드를 상속합니다. 상위 범위. '.' 사용 ng-model 지시문의 속성 이름에 속성이 상속되도록 보장합니다.

구현

상태 간에 $scope 데이터를 공유하려면 다음 단계를 따르세요.

1. 정의 $scope.Model과 같은 $scope의 참조 유형(예: 객체).
2. 부모 상태에서 모델 객체를 초기화합니다(예: $scope.Model = $scope.Model || {Name: "xxx"}).
3. 하위 상태에서는 ng-model="을 사용하여 모델 객체에 액세스합니다. Model.PropertyName"(예: ).

예

// State Configuration
$stateProvider
  .state("main", {
    url: "/main",
    templateUrl: "main_init.html",
    controller: 'mainController'
  })
  .state("main.1", {
    parent: 'main',
    url: "/1",
    templateUrl: 'form_1.html',
    controller: 'mainController'
  })
  .state("main.2", {
    parent: 'main',
    url: "/2",
    templateUrl: 'form_2.html',
    controller: 'mainController'
  });

// Controller
controller('mainController', function ($scope) {
  $scope.Model = $scope.Model || {Name : "xxx"};
});

이 단계를 따르면 UI-Router의 상태 간에 $scope 데이터를 원활하게 공유할 수 있습니다. , 애플리케이션 전체에서 일관된 데이터 액세스를 보장합니다.

위 내용은 AngularJS UI-Router에서 상태 간에 $scope 데이터를 공유하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!