如何在使用AngularJS返回$ http結果時隱藏或顯示菜單項

Question

我有一個菜單和一個登錄頁面:)。
我想更改菜單項目，但目前登錄後無法刷新菜單。
如果登錄成功，應顯示一些菜單項或應添加特殊用戶菜單項。
但我不能這樣做。

Answer 1

1）如果你的菜單中的項目包含與$ HTTP調用相同的範圍內，你可以寫下面的代碼：

function FirstController($scope, $http){ 

    $scope.showFirstItem = false; 

    $scope.clickAction = function(){ 
     $http.get('/someUrl'). 
      success(function(data, status, headers, config) { 
      $scope.showFirstItem = true; //if success - show it 
      }). 
      error(function(data, status, headers, config) { 
      $scope.showFirstItem = false; 
      }); 
    } 
} 

<div ng-controller="FirstController"> 

    <button ng-click="clickAction()">Show the first item</button> 

    <ul> 
     <li ng-show="showFirstItem">First item</li> 
     <li>Second Item</li> 
    </ul> 
</div> 

2）如果$ HTTP調用解僱在其他控制器中，您可以爲其創建共享服務。您可以將一些值/操作從一個控制器傳遞到另一個控制器。

例如：

angular.module("yourAppName", []).factory("mySharedService", function($rootScope){ 

    var mySharedService = {}; 

    mySharedService.showFirstItem = false; 

    var httpCall = function() { 
     $http.get('/someUrl'). 
      success(function(data, status, headers, config) { 
      mySharedService.showFirstItem = true; 
      }). 
      error(function(data, status, headers, config) { 
      mySharedService.showFirstItem = false; 
      }); 
    }; 

    mySharedService.httpCall= function(){ 
     httpCall(); 
     $rootScope.$broadcast('httpCallFired'); 
    } 

    return mySharedService; 
}); 

和之後，它注入到的任何控制器。

function FirstController($scope, mySharedService){ 

    $scope.showFirstItem = false; 

    $scope.$on('httpCallFired', function() { 
     $scope.showFirstItem = mySharedService.showFirstItem; 
    }); 
} 

function SecondController($scope, mySharedService) { 
    $scope.clickAction = function() { 
     mySharedService.httpCall(); 
    }; 
} 

<div ng-controller="FirstController">  
    <ul> 
     <li ng-show="showItem">First item</li> 
     <li>Second Item</li> 
    </ul> 
</div> 

<div ng-controller="SecondController"> 
    <button ng-click="clickAction()">Show the first item</button> 
</div>