Javascript 如何使用ui路由在单击时显示一个div并在单击时隐藏其他div？_Javascript_Html_Angularjs

Javascript 如何使用ui路由在单击时显示一个div并在单击时隐藏其他div？

javascript html angularjs

Javascript 如何使用ui路由在单击时显示一个div并在单击时隐藏其他div？,javascript,html,angularjs,Javascript,Html,Angularjs,在这里，我尝试注入$anchorScroll，它将滚动到在$location.hash（）----->中找到的id为的任何元素，在这里是事件第1页： my js: var app = angular.module("dashboardApp", ["ngMaterial", "ngAnimate", "ngSanitize", "ui.bootstrap", "ngAria", "ui.router", "datatables", "gridshore.c3js.chart"]); app

在这里，我尝试注入$anchorScroll，它将滚动到在$location.hash（）----->中找到的id为的任何元素，在这里是事件

第1页：

my js:

var app = angular.module("dashboardApp", ["ngMaterial", "ngAnimate", "ngSanitize", "ui.bootstrap", "ngAria", "ui.router", "datatables", "gridshore.c3js.chart"]);

app.config(function($stateProvider, $urlRouterProvider, $locationProvider){

    $locationProvider.hashPrefix('');

    $urlRouterProvider.otherwise('/systems');

    $stateProvider
        .state('systems',{
            url:"/systems",
            templateUrl: 'pages/systems.html'
        })

        .state('summary', {
            url:"/summary",
            controller:"maxeCtrl",
            templateUrl: 'pages/summary.html'       
        });
});

app.run(function($rootScope, $location, $anchorScroll, $stateParams, $timeout) { 
      $rootScope.$on('$stateChangeSuccess', function(newRoute, oldRoute) {
        $timeout(function() { 
          $location.hash($stateParams.scrollTo);
          $anchorScroll();
        }, 100);
      });
    });

我希望当用户单击“summary（{scrollTo:'incident'}）”时显示div id=“incident”，并且id=“abc”的另一个div应该隐藏

提前感谢您的帮助。

我想您正在寻找命名视图。检查这里

来自上面链接的示例

app.controller("maxeCtrl", ["$scope", "MAXeService", "DTOptionsBuilder", "$timeout", function($scope, MAXeService, DTOptionsBuilder, $timeout) {

    console.log("Angular: MAXeCtrl in action")

    $scope.oneAtATime = true;

    $scope.status = {
            isFirstOpen: true,
            isSecondOpen: true
    };

对于

ui-router>=1.0

请检查此处

带有

id=“abc”

的div何时显示？这不是它应该如何工作的。这个想法似乎没有用。您只需使用ng if语句即可this@Icycool当我单击一个按钮以显示div1和div2时，当我再次单击它以执行相反的操作时，将显示div2和div1。

<div id="abc">
this is div 1
</div>

<div uib-accordion-group id="incident" class="panel-default">
                        <uib-accordion-heading>
                        <div class="accordion_heading">Incidents</div>
                        </uib-accordion-heading>
                        <uib-accordion-body> </uib-accordion-body>
                                    <table>
                                    </table>
                    </div>

app.controller("maxeCtrl", ["$scope", "MAXeService", "DTOptionsBuilder", "$timeout", function($scope, MAXeService, DTOptionsBuilder, $timeout) {

    console.log("Angular: MAXeCtrl in action")

    $scope.oneAtATime = true;

    $scope.status = {
            isFirstOpen: true,
            isSecondOpen: true
    };

<!-- index.html -->     
<body>      
  <div ui-view="filters"></div>     
  <div ui-view="tabledata"></div>       
  <div ui-view="graph"></div>       
</body>

$stateProvider      
  .state('report',{     
    views: {        
      'filters': {      
        templateUrl: 'report-filters.html',     
        controller: function($scope){ ... controller stuff just for filters view ... }      
      },        
      'tabledata': {        
        templateUrl: 'report-table.html',       
        controller: function($scope){ ... controller stuff just for tabledata view ... }        
      },        
      'graph': {        
        templateUrl: 'report-graph.html',       
        controller: function($scope){ ... controller stuff just for graph view ... }        
      }     
    }       
  })