Verbergen von Schaltflächen in eckigen js basierend auf einem Zustand

Question

Entwickeln Sie eine Anwendung in eckigen js und mit ui.router. Ich möchte bestimmte Schaltflächen basierend auf einem bestimmten Zustand ausblenden.

Ich habe das Click-Ereignis implementend, die in dem ausgewählten Zustand navigiert, und ich möchte, wenn eine Schaltfläche angeklickt wurde und aktiv ausgeblendet werden und wieder auftauchen, wenn der Staat nicht aktiv ist

ich versucht habe

HTML FOR THE BUTTONS 
<button type="button" ng-click="viewNew()" class="btn btn-sm btn-success"> 
     <i class="glyphicon glyphicon-plus"> 
     </i> New calls 
    </button> 
    <button type="checkbox" ng-click="viewAssigned()" class="btn btn-sm btn-success"> 
     <i class="glyphicon glyphicon-plus"> 
     </i> Assigned calls 
    </button> 

auf dem Controller

$scope.viewAssigned = function() { 

    $state.go("dash.call.assigned"); 
    } 

$scope.viewNew = function() { 

    $state.go("dash.call.new"); 
     } 

Wie kann ich mein Controller-Code ändern diese Tasten ng-Show zu verstecken und zeigen

Answer 1

Sie müssen dem Controller Informationen über den Status hinzufügen, z. B. $scope.state = $state.current.name Von dort können Sie das in einer ng-show oder ng-if verwenden.

Answer 2

Sie dies tun können,

<button type="checkbox" ng-click="viewAssigned()" ng-hide="$state.includes('dash.call.assigned')" class="btn btn-sm btn-success"> 
    <i class="glyphicon glyphicon-plus"></i> Assigned calls 
</button> 

Sie in $ rootScope $ Zustand hinzugefügt haben sollte, damit dies funktioniert. Inject $ state, $ rootScope und platzieren Sie diese im Run-Block Ihrer App.

$rootScope.$state = $state; 

Answer 3

Sie können eine $ scope Variable den Zustand change.look unter der unten genannten Code sollte

$scope.viewAssigned = function() { 
    $scope.viewnew = true; 
    $state.go("dash.call.assigned"); 
    } 

$scope.viewNew = function() { 
    $scope.viewnew = false; 
    $state.go("dash.call.new"); 
     } 

Und Ihre HTML-Code verfolgen so sein,

<button type="button" ng-click="viewNew()" class="btn btn-sm btn-success" ng-hide="viewnew"> 
    <i class="glyphicon glyphicon-plus"> 
    </i> New calls 
</button> 
<button type="checkbox" ng-click="viewAssigned()" class="btn btn-sm btn-success" ng-hide="!viewnew"> 
    <i class="glyphicon glyphicon-plus"> 
    </i> Assigned calls 
</button> 

Answer 4

Sie können sehen Sie, wenn sich die $state ändert und diese Tasten ausblenden.

myApp.run(function ($rootScope, $state) { 
    $rootScope.viewnew= false; 
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) { 
     if (toState.name === 'myState') {//toState variable see the state you're going 
      $rootScope.viewnew = false; 
     } else { 
      $rootScope.viewnew = true; 
     } 
    }); 
}); 

dann fügen Sie diese zu Ihrer Tasten: es

<button type="button" ng-click="viewNew()" ng-hide="viewnew" class="btn btn-sm btn-success"> 
     <i class="glyphicon glyphicon-plus"> 
     </i> New calls 
    </button> 
    <button type="checkbox" ng-click="viewAssigned()" ng-hide="!viewnew" class="btn btn-sm btn-success"> 
     <i class="glyphicon glyphicon-plus"> 
     </i> Assigned calls 
    </button> 

so, wenn Ihr $state Änderung würde es verstecken oder zeigen auf Ihrer run() Sie eine ähnliche Funktion wie diese verwenden können.