AngularJS ui-Route: Nur 1 verschachtelte Ansicht ändern und andere Ansichten speichern aus relaoding

Question

Dummy-Projekt herunterladen link `

--mainview 
--mainview/about 
--mainview/about/leftcontainer 
--mainview/about/rightcontainer 

Problem

Ich habe eine Schaltfläche auf etwa Spalte rechts auf dieser Seite ändern das ändert die Ansicht von rightcontainerui-view, aber es aktualisiert auch die linke Seite ui-view.

Ausarbeitung

Wenn Sie das Projekt oben angegebenen ausgeführt werden. Die erste Seite, die Sie sehen, ist

Bitte ein paar Klicks, die auf den Tasten machen (wie unten)

klicken dann auf change right side column

Es wird aktualisiert die Zählung der linken Spalte.

Bitte helfen Sie mir nur eine bestimmte Ansicht zu ändern, anstatt alle seine Geschwister

Route Code

stateProvider 
.state('about', { 
    url: '/about', 
    views: { 
     // the main template will be placed here (relatively named) 
     '': { 
      templateUrl: 'partial-about.html', 
      controller: function ($scope) { 
       $scope.count = 1; 
       $scope.countPlus = function() { 
        $scope.count++; 
       } 
      } 
     }, 

     // the child views will be defined here (absolutely named) 
     'columnOne@about': { 
      template: 'Look I am a column! <br> press count <input type="button" ng-click="countPlus()" value="count++" /> {{count}}', 
      controller: function ($scope) { 
       $scope.count = 1; 
       $scope.countPlus = function() { 
        $scope.count++; 
       } 
      } 
     }, 

     // for column two, we'll define a separate controller 
     'columnTwo@about': { 
      templateUrl: 'table-data.html', 
      controller: 'scotchController' 
     } 
    } 

}) 

.state('about.changeRightSideColumn', { 
    url: '/changeRightSideColumn', 
    views: { 
     // the main template will be placed here (relatively named) 
     // the child views will be defined here (absolutely named) 
     'columnOne@about': { 
      template: 'Look I am a column! <br> press count <input type="button" ng-click="countPlus()" value="count++" /> {{count}}', 
      controller: function ($scope) { 
       $scope.count = 1; 
       $scope.countPlus = function() { 
        $scope.count++; 
       } 
      } 
     }, 

     // for column two, we'll define a separate controller 
     'columnTwo@about': { 
      templateUrl: 'right-side-column.html' 
     } 
    } 

}) 

Answer 1

Dies geschieht, weil Sie sowohl die Spalten in der rechten Spalte Handhabung ändern. Wenn Sie den Code app.js wie folgt ändern, wird es wie erwartet funktionieren.

Ihr Code:

Lösung:

.state('about.changeRightSideColumn', { 
     url: '/changeRightSideColumn', 
     views: { 
      // for column two, we'll define a separate controller 
      'columnTwo@about': { 
       templateUrl: 'right-side-column.html' 
      } 
     } 
    } 

Hope this Ihnen helfen.