Vikas Bansal Vikas Bansal - 5 months ago 21
jQuery Question

angularjs ui-route: change only 1 nested view and save other views from relaoding

dummy project download link`

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


Problem

I have a button on about change right side column that changes the view of
rightcontainer
ui-view
but it also refreshes the left-hand side
ui-view
.

Elaboration

When you will run the project provided above. The first page you will see is

enter image description here

Please make some clicks on the buttons provided (as below)

enter image description here

then click on
change right side column

enter image description here

It will refresh the count of left-hand side column.

Please help me to change only a specific view instead of all its siblings

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

This happens because you change both the columns in right column handling. If you change the app.js code as follows it will work as you expect.

Your Code:

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

    }

Solution:

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

Hope this will help you.