angularjs ui-route: 仅更改 1 个嵌套视图并避免重新加载其他视图

Question

虚拟项目下载link`

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

希望对您有所帮助。

angularjs ui-route: 仅更改 1 个嵌套视图并避免重新加载其他视图

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

javascript

jquery

angularjs

angular-ui-router

angular-route-segment