ui 라우터 - 공유 컨트롤러가 포함된 중첩된 보기

ui 라우터 - 공유 컨트롤러가 포함된 중첩된 보기

컨트롤러를 중첩된 뷰와 공유하는 추상적 부모 뷰가 있습니다.

.state('edit', {
    abstract: true,
    url: '/home/edit/:id',
    templateUrl: 'app/templates/editView.html',
    controller: 'editController'
})
.state('edit.details', {
    url: '/details',
    templateUrl: 'app/templates/editDetailsView.html'
})
.state('edit.info', {
    url: '/info',
    templateUrl: 'app/templates/editInfoView.html'
})

라우팅은 예상대로 동작합니다.

문제는 이 파일을 업데이트 할 때$scope변경 내용이 보기에 반영되지 않습니다.부모 입장에서 똑같이 하면 잘 동작합니다.이 상황이 필요한 것은 아닙니다.$apply.

제 추측으로는 새로운 예로는editController각 뷰에 대해 작성되고 있습니다만, 그 이유나 방법을 알 수 없습니다.

여기서의 문제는 Q&A와 관련이 있을 것입니다: 어떻게 하면 angularjs UI-router의 상태 간에 $scope 데이터를 공유할 수 있습니까?

이 문제를 해결하는 방법은 다음과 같습니다.

범위에 대해서

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

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

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

그리고 이것도

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

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

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

이를 편집 컨트롤러에서 수행해야 합니다.

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

그리고 우리는 그것을 재사용할 수도 있다.controller: 'editController' ($190이기 때문에 그럴 필요는 없습니다.모델이 등장합니다 - 상속 덕분입니다)

.state('edit', {
    abstract: true,
    url: '/home/edit/:id',
    templateUrl: 'app/templates/editView.html',
    controller: 'editController'
})
.state('edit.details', {
    url: '/details',
    templateUrl: 'app/templates/editDetailsView.html',
    controller: 'editController'
})
.state('edit.info', {
    url: '/info',
    templateUrl: 'app/templates/editInfoView.html',
    controller: 'editController'
})

같은 컨트롤러가 여러 번 인스턴스화되지만(모든 자녀 부모)$scope.Model(부모의 경우) 1회만 개시되어 어디에서나 이용 가능

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

Pilot Bob의 코멘트를 바탕으로

자녀에게 독자적인 컨트롤러 상태를 부여하는 패턴을 사용할 때 이 작업을 수행할 수 있습니까?

다른 솔루션을 추가하기로 결정했습니다.controllerAs상기/원래의 개념을 유지하면서

작동 중인 플런커가 있습니다.

현재 각 주는 서로 다른 컨트롤러를 가지며 부모 상태는 이를 "parentCtrl"로 명명합니다(자녀 컨트롤러가 있는 자식 범위에서 덮어쓰지 않음).

 .state("main", {
      controller:'mainController',
      controllerAs: "parentCtrl",
      ...
  .state("main.1", {
      parent: 'main',
      controller:'child1Controller',
      controllerAs: "ctrl",
      ...
  .state("main.2", {
      parent: 'main',
      controller:'child2Controller',
      controllerAs: "ctrl", 
      ... 

컨트롤러는 다음과 같습니다.

.controller('mainController', function ($scope) {
    this.Model =  {Name : "yyy"};
})
.controller('child1Controller', function ($scope) {
    $scope.Model = $scope.parentCtrl.Model;
})
.controller('child2Controller', function ($scope) {
    $scope.Model = $scope.parentCtrl.Model; 
})

동작 확인은 이쪽에서

다른 으로 하다를 사용할 수 있습니다.resolve

.state('edit', {
    abstract: true,
    url: '/home/edit/:id',
    templateUrl: 'app/templates/editView.html',
    controller: 'editController',
    resolve: {
        baseData: function() {
            return {};
        }
    }
})
.state('edit.details', {
    url: '/details',
    templateUrl: 'app/templates/editDetailsView.html',
    controller: 'editController'
})
.state('edit.info', {
    url: '/info',
    templateUrl: 'app/templates/editInfoView.html',
    controller: 'editController'
})


.controller('editController', function (baseData) {
    baseData.foo = baseData.foo || 'bar';
});

하위 컨트롤러에서는 다음을 수행할 수 있습니다.

angular.extend($scope, $scope.$parent)

컨트롤러가 별칭(예: 'vm')과 함께 사용되는 경우 다음을 수행할 수 있습니다.

let vm = angular.extend(this, $scope.$parent.vm);

언급URL : https://stackoverflow.com/questions/27768033/ui-router-nested-views-with-shared-controller