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

angularjs ui-router의 상태간에 $ 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'
  })  

자식 상태에서 mainController 범위에 액세스 할 수 없거나 원하는 범위가 아닌 다른 인스턴스를 가져옵니다. 나는 단순한 것을 놓치고 있다고 느낀다. 상태 개체에 공유 데이터 구성 옵션이 있지만 이것이 이와 같은 용도로 사용되어야하는지 확실하지 않습니다.

---

나는 작동하는 plunker를 만들고$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 이미 존재 하는지 확인하고 ... 그렇지 않은 경우 (Parent 상태) 새로운 intance로 인스턴스화한다는 것입니다 {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단순히 의미하는이 있음을 reference객체 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 isn't required, but makes sense for this use case.

SignupController.js

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

여기에서 우리는 UI 라우터의를 얻을 $state그것을 넣어$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 개의 컨트롤러가 있고 하나는 공유되고 (mainController) 각 뷰에는 자체적으로 있습니다.

---

중첩 된 뷰를 사용하는 경우 다른 컨트롤러를 작성하지 마십시오. 이런 식으로 그들은 동일한 컨트롤러 데이터를 공유합니다.

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

---

Isn't the simplest solution to group shared variables into a service you can access in every controller ? ...

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