angularjs UI 라우터의 상태 간에 $scope 데이터를 공유하려면 어떻게 해야 합니까?

angularjs UI 라우터의 상태 간에 $scope 데이터를 공유하려면 어떻게 해야 합니까?

부모 컨트롤러에서 서비스를 사용하거나 감시자를 구성하지 않고 자녀에게 메인 컨트롤러에 대한 접근권을 부여하려면 어떻게 해야 합니까?$scope.

  .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'
  })  

자녀 상태에서 메인 컨트롤러 범위에 액세스할 수 없거나 원하는 인스턴스가 아닌 해당 범위의 다른 인스턴스를 얻을 수 있습니다.뭔가 간단한 걸 놓치고 있는 것 같아.상태 오브젝트에는 공유 데이터 설정 옵션이 있는데, 이 옵션을 이와 같은 용도로 사용해야 하는지 잘 모르겠습니다.

사용법을 보여주는 작업용 플런커를 만들었습니다.$scope및 UI-Router 입니다.

상태 정의는 변경되지 않습니다.

$stateProvider
    // States
 .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'
  })  

하지만 각 주마다 컨트롤러가 다를 수 있습니다. 왜일까요?view각 주(州)의new 정의된 인스턴스controller그래서 우리가mainController아래 그림과 같이, 우리는 확신할 수 있습니다. 만약 우리가 주를 탐색한다면'main.2'두 번 인스턴스화 됩니다.

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

하지만 여기서 알 수 있는 것은 우리가 이 모든 것이$scope.Model 이미 지나간 일인데...그렇지 않은 경우(부모 상태) 새로운 인텐션으로{Name : "xxx"} 인스턴스화합니다.

음, 내가 말하고 싶은 것은: 오직 부모 국가만이,$scope.Model다른 모든 사람들은 이미 채워질 거야. 어떻게요?답은 다음과 같습니다.

보기 계층에 의한 범위 상속만

상태 보기가 중첩된 경우에만 범위 속성이 상태 체인으로 상속됩니다.스코프 속성 상속은 상태 중첩과 뷰 중첩(템플릿)과는 무관합니다.

템플릿이 사이트 내의 다양한 네스트되지 않은 위치에서 UI 보기를 채우는 중첩된 상태가 있을 수 있습니다.이 시나리오에서는 하위 상태 보기 내에서 상위 상태 보기의 범위 변수에 액세스할 수 없습니다.

그래서 서류에 기재되어 있는 바와 같이.하위 보기가 상위 보기에 중첩되므로 범위가 상속됩니다.

범위에 대해서

AngularJS에서 하위 스코프는 일반적으로 상위 스코프에서 프로토타입으로 상속됩니다.
...

모델에 '.'를 붙이면 프로토타입 상속을 확실하게 할 수 있습니다.

// So, use
<input type="text" ng-model="someObj.prop1"> 
// rather than
<input type="text" ng-model="prop1">.

그리고 이것이 마지막입니다.우리는 상속을 받는다.UI-Router참조 유형()Model을 스마트하게 사용했기 때문에, 즉,'.'을 찍다ng-model-할 수 있습니다.

모 : ' 、 「 . 」 （ 「 ） 。ng-model="Model.PropertyName단순히, 어떤 물체가 있다는 것을 의미한다.Model {}과 같은.PropertyName

여기서 작업 예를 확인하십시오.

$rootScope를 통해 전체 범위를 얻을 수 있습니다.범위의 일부만 필요한 경우 ui-router에 사용자 정의 데이터 기능이 있습니다.

다단계 양식을 작성하는 방법은 다음과 같습니다.흐름의 스텝에 대한 정보를 포함하는 루트가 필요했습니다.

먼저 UI 라우터를 사용하는 루트가 몇 가지 있습니다.

  // Sign UP routes
  .state('sign-up', {
    abstract: true,
    url: '/sign-up',
    controller: 'SignupController',
    templateUrl: 'sign-up/index.html',
  })
  .state('sign-up.start', {
    url: '-start',
    templateUrl: 'sign-up/sign-up.start.html',
    data: { step: 0, title: 'Welcome to Mars!', },
  })
  .state('sign-up.expertise', {
    url: '-expertise',
    templateUrl: 'sign-up/sign-up.expertise.html',
    data: { step: 1, title: 'Your Expertise'},
  })

주의:

• data각 루트의 요소.
• abstract가 ((으)로 되어 있다SignupController이 멀티스텝 폼의 컨트롤러는 이것뿐입니다.abstract필수는 아니지만 이 사용 사례에 적합합니다.

Signup Controller.js

angular.module('app').controller('SignupController', function($scope, $state) {
  $scope.state = $state;
});

의라우터 의라우터 의라우터 의라우터 의라우터 의라우터 의라우터 의라우터 의라우터 의라우터 의라우터 의라우터 입니다.$state을 혀 it에 입히다$scope

메인 템플릿 'sign-up/index.html'은 다음과 같습니다.

<h2>{{state.current.data.title}}</h2>

<div>This is a multi-step-progress control {{state.current.data.step}}</div>

<form id="signUpForm" name="signUpForm" novalidate>
  <div ui-view></div>
</form>

하위 템플릿은 원하는 대로 사용할 수 있습니다.

부모->자녀 상속에서는 스코프는 다음과 같습니다.

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

사용법이 단순하기 때문에 3개의 컨트롤러가 있으며, 1개는 공유(메인 컨트롤러)되고 각 뷰에는 독자적인 컨트롤러가 있습니다.

중첩 보기를 사용하는 경우 다른 컨트롤러는 쓰지 마십시오.이렇게 하면 동일한 컨트롤러 데이터를 공유할 수 있습니다.

.state("main", {
            url: "/main",
            templateUrl: "templates/Ders",
            controller: "DersController as DersC"
       }).state("main.child1", {
            url: "/child1",
            templateUrl: "templates/Ders/child1"
       }).state("main.child2", {
            url: "/child2",
            templateUrl: "templates/Ders/child2"
        })

공유 변수를 모든 컨트롤러에서 액세스할 수 있는 서비스로 그룹화하는 것이 가장 간단한 솔루션이 아닐까요?

언급URL : https://stackoverflow.com/questions/27696612/how-do-i-share-scope-data-between-states-in-angularjs-ui-router