如何在使用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>