javascript - angularjs ui-route：仅更改 1 个嵌套视图并保存其他视图以防止重新加载

Question

虚拟项目下载链接`

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

问题

我有一个关于更改右侧列的按钮，可以更改视图，rightcontainer ui-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: {
            // 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'
            }
        }

    }

解决方案：

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

希望这会帮助你。