2017-09-14 1 views
2

Hier versuche ich $ anchorScroll zu injizieren und es wird zu einem beliebigen Element mit der ID $ location.hash() ----> scrollen, was für den Fall, dass es sich um einen Vorfall handelt.Wie man ein div beim Klicken zeigt und andere beim Klick mit ui-route ausblenden?

page1:

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

Seite 2: i Akkordeon bin mit hier und bietet id = "Vorfall", die auf dieses Element bewegen wird.

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

Ich mag div id = "Vorfall" angezeigt werden, wenn der Benutzer klickt auf "Zusammenfassung ({scrollTo: 'Vorfall'})" und die anderen div mit id = "abc" sollte sich verstecken.

Schätzen Sie jede Art von Hilfe im Voraus.

+0

Wann sollte der div mit 'id = "abc"' Show? – Icycool

+0

so soll es nicht funktionieren. Diese Idee scheint nicht nützlich zu sein. Sie können einfach ng-if-Anweisung für diese verwenden –

+0

@Icycool Wenn ich auf eine Schaltfläche klicken, um eine div1-Show und die div2-ausblenden, und wenn ich noch einmal auf das Gegenteil, div 2 verstecken und div1 zeigen. – Dshah

Antwort

0

Ich denke, dass Sie nach benannten Ansichten suchen. Prüfen Sie hier

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

Probe von oben Link

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

Routing

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

für ui-router >=1.0 Check hier https://ui-router.github.io/guide/views#multiple-named-uiviews

Verwandte Themen