Question

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);
      });
    });

这里我尝试注入$ anchorScroll，它会滚动到$ location.hash（）中找到id的任何元素----＆gt;这是事件。

1页：

<div class="system_row2">
                <div class="col-sm-3">Today Incident's:</div>
                <div class="col-sm-9 ">
                    <div class="col-sm-12">
                        <a ui-sref="summary({scrollTo:'incident'})">
                            </a>   
                            </div>

Page2：我在这里使用手风琴并提供id =＆＃34;事件＆＃34;将滚动到此元素。

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

Mycontroller：

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

我想要div id =＆＃34;事件＆＃34;当用户点击＆＃34;摘要（{scrollTo：＆＃39;事件＆＃39;}）＆＃34;时显示和另一个div =＆＃34; abc＆＃34;应该隐藏。

提前感谢任何形式的帮助。

Answer 1

我认为您正在寻找命名视图。点击这里

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

以上链接中的示例

<!-- 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 ... }        
      }     
    }       
  })

ui-router >=1.0点击此处https://ui-router.github.io/guide/views#multiple-named-uiviews

如何在点击时显示一个div并使用ui-route隐藏其他点击？

1 个答案: