angularjs щ-маршрут: изменить только 1 вложенную просматривать и сохранять другие взгляды от relaoding

Question

фиктивного проекта скачать link `

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

Проблема

У меня есть кнопка на около изменения правой боковой колонке который меняет вид rightcontainerui-view, но он также обновляет левую сторону ui-view.

Разработка

Когда вы запустите проект, указанной выше. На первой странице вы видите

Пожалуйста, некоторые щелчки на кнопках, предоставленных (ниже)

затем нажмите на change right side column

Это освежит число столбцов левой стороны.

Пожалуйста, помогите мне изменить только конкретный вид, а не все его братья и сестры

код маршрута

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

Это происходит потому, что вы меняете как столбцы в обработке правой колонке. Если вы измените код app.js следующим образом, он будет работать так, как вы ожидаете.

Вашего код:

Решение:

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

Надеется, что это поможет.