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

Posted 2023-05-09

【中文标题】angularjs ui-route：仅更改 1 个嵌套视图并保存其他视图以防止重新加载

【英文标题】：angularjs ui-route: change only 1 nested view and save other views from reloading

【发布时间】：2016-10-21 13:17:06

【问题描述】：

虚拟项目下载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'
        
    

)

【参考方案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'
            
        
    

希望这会对你有所帮助。