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

AngularJS UI-Router에서 상태 간 $scope 데이터 공유

상태 관리를 위해 UI-Router를 활용하는 AngularJS 애플리케이션에서 다음이 발생할 수 있습니다. 상위 상태와 하위 상태 간에 $scope 데이터를 공유해야 합니다. 서비스나 복잡한 감시자를 사용하지 않고 어떻게 이를 달성할 수 있습니까?

뷰 계층 상속 활용

AngularJS UI-Router는 하위 뷰가 상위 뷰 내에 중첩되어 있습니다. 이는 하위 상태의 템플릿이 상위 보기의 템플릿 내에 중첩되어야 함을 의미합니다.

예를 들어 다음 상태 정의를 고려하십시오.

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

이 시나리오에서 하위 상태("form_1.html" 및 "form_2.html")는 상위 상태("main_init.html")의 보기 내에 중첩됩니다. 이를 통해 상위 상태에서 하위 상태로 $scope 속성을 상속할 수 있습니다.

참조 유형 및 점 표기법 사용

데이터가 공유되도록 하려면 다음을 수행합니다. 점 표기법을 사용하여 상위 컨트롤러의 $scope에 참조 유형을 정의하는 것이 중요합니다. 예를 들면 다음과 같습니다.

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

점 표기법을 사용하여 $scope.Model이 참조 유형임을 보장합니다. 하위 상태에서 액세스하면 상위 상태에서 생성된 $scope.Model과 동일한 인스턴스가 되어 데이터 공유가 용이해집니다.

예

예제에서 질문에 제공된 경우 기본 컨트롤러 및 하위 상태는 범위 상속을 위해 올바르게 설정됩니다. 문제는 점 표기법을 부적절하게 사용하는 데 있습니다. $scope.Model.Name을 참조하도록 하위 상태의 ng-model을 수정하면 데이터 공유가 설정됩니다.

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