서비스나 감시자 없이 AngularJS UI 라우터 상태 간에 데이터를 공유하는 방법은 무엇입니까?

서비스나 관찰자 없이 AngularJS UI-Router 상태 간에 $scope 데이터 공유

UI-Router에서는 상위 컨트롤러의 서비스나 감시자에 의존하지 않고 메인 컨트롤러와 그 하위 상태 컨트롤러.

해결책:

핵심은 AngularJS 범위와 UI-Router 뷰 간의 관계를 이해하는 데 있습니다.

• 뷰 계층 구조에 의한 범위 상속 : 범위는 상태 뷰가 다음과 같은 경우에만 상태 체인으로 상속됩니다. 중첩됩니다.
• 범위 이해: 하위 범위는 일반적으로 프로토타입적으로 상위 범위에서 상속됩니다. '.' 사용 표기법(예: Model.PropertyName)은 이러한 상속을 보장합니다.

기술적 구현:

1. 중첩 뷰 정의: 하위 상태 뷰가 중첩되어 있는지 확인하세요. 상위 뷰 내에서.
2. 참조 유형 사용 값: $scope 모델에서 기본 값 대신 참조로 전달되는 객체나 참조를 사용하세요.
3. 점 표기법 사용: ng-model 정의에서 다음을 사용하세요. 프로토타입 상속을 보장하기 위한 점 표기법(예: Model.PropertyName 대신 PropertyName).

예:

다음 UI-Router 상태 정의를 고려하세요.

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

mainController 내에서 다음과 같이 공유 데이터 모델을 초기화합니다.

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

하위 상태 템플릿에서 점 표기법으로 ng-model을 사용하세요. 공유 데이터에 액세스하려면:

<input type="text" ng-model="Model.Name">

이 단계를 따르면 상위 컨트롤러의 서비스나 감시자가 필요 없이 UI-Router 상태의 $scope 간에 데이터를 효과적으로 공유할 수 있습니다.

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