AngularJS：使用$ broadcast来隐藏表列

Question

我想使用angularjs $ broadcast属性来隐藏我的表列。如果数据广播，则应显示表格列，否则应隐藏表格列。目前，如果我运行我的代码，一旦登录我广播我的登录用户名的功能，但仍然我的整个表不显示。我可以知道一种方法来解决它。

这是我的controller.js代码：

.controller('AllMovieController', 
      [ 
       '$scope', 
       'dataService', 
       '$location', 
       '$rootScope', 

       function ($scope, dataService, $location, $rootScope){ 
        $scope.noteEnabled = false; 
        $scope.movies = [ ]; 
        $scope.movieCount = 0; 
        $scope.currentPage = 0; //current page 
        $scope.entryLimit = 20; //max no of items to display in a page 

        var getAllMovie = function() { 
         dataService.getAllMovie().then(
          function (response) { 
           $scope.$on("passuser", function ($event, data){ 
            if(data){ 
             $scope.movies = response.data; 
             $scope.showSuccessMessage = true; 
             $scope.successMessage = "All movie Success"; 
             $scope.noteEnabled = true; 
            }else{ 
             $scope.movies = response.data; 
             $scope.noteEnabled = false; 
            } 
           }); 


          }, 
          function (err){ 
           $scope.status = 'Unable to load data ' + err; 
          } 
         ); // end of getStudents().then 
        }; 

        $scope.numberOfPages = function(){ 
         return Math.ceil($scope.movies.length/$scope.entryLimit); 
        }; 


        getAllMovie(); 

       } 
      ] 
     ) 

这是我的部分的HTML代码：

<table class="table table-hover table-bordered"> 
<thead> 
    <tr> 
     <th>Title</th> 
     <th>Description</th> 
     <th ng-show="noteEnabled">Notes</th> 
    </tr> 
</thead> 
<tbody> 
    <tr ng-repeat="movie in movies | pagination: currentPage * entryLimit | 
    limitTo: entryLimit"> 
     <td> 
      {{movie.title}} 
     </td> 
     <td> 
      {{movie.description}} 
     </td> 
     <td data-ng-click="selectFilmDetails($event,movie)" ng-show="noteEnabled" > 
      {{movie.comment}} 
     </td> 
    </tr> 
</tbody> 
</table> 

这是广播控制器代码：

.controller('LoginController', 
      [ 
       '$scope', 
       'dataService', 
       '$location', 
       '$window', 
       '$rootScope', 
       function ($scope, dataService, $location, $window, $rootScope){ 
        $scope.check_login = function($event,userID,passwd){ 
         dataService.login(userID,passwd).then(
          function (response){ 
           if(response.result.status=='ok'){ 
            $scope.user = response.user; 
            $rootScope.$broadcast("passuser", $scope.user); 
            $location.path('#/home'); 
            //$window.location.reload(); 

           }else{ 
            $scope.message = response.result.message; 

           } 
          }, 

          function (err) { 
           $scope.status = 'unable to connect to data' + err; 
          } 
         ); 

        }//end of function check_login 
       } 
      ] 
     ) 

以前，我使用会话来检查用户是否登录，但现在我正在使用广播将用户名传递给控制台米勒。同样我试图将用户名传递给这个控制器它不工作。我真的需要帮助。提前致谢。

Answer 1

我会推荐将您的事件监听器移动到getAllMovie()服务调用的.then()之外。如果在承诺解决之前播放了passuser事件，会发生什么情况？以下是我会建议重组你的代码（我删除模块你注射，但没有使用）：

更新：这个问题可能是您的控制器具有事件侦听器未实例化时，你正在广播事件。这是一个猜测，因为它不清楚这些是一个视图，不同的视图等。我建议将登录状态存储在一个值中。 这仅仅是一个例子 - 它可能不是最好的方式，或者将解决所有你需要的方法。我没有测试过这个，所以你可能需要玩弄它才能按照你想要的方式工作。这是我更新的推荐代码：

.value('UserInfo', { user: '', loggedIn: false }) 
.controller('LoginController', 
    ['$scope', 'dataService', '$location', 'UserInfo', 
    function ($scope, dataService, $location, UserInfo) { 
     $scope.check_login = function($event,userID,passwd) { 
      dataService.login(userID,passwd).then(
       function (response){ 
        if(response.result.status=='ok'){ 
         UserInfo.user = response.user; 
         UserInfo.loggedIn = true; 
         $location.path('#/home'); 
        } else { 
         $scope.message = response.result.message; 
         UserInfo.user = ''; 
         UserInfo.loggedIn = false; 
        } 
       }, 
       function (err) { 
        $scope.status = 'unable to connect to data' + err; 
        UserInfo.user = ''; 
        UserInfo.loggedIn = false; 
       }); 
     }//end of function check_login 
    }]) 
.controller('AllMovieController', ['$scope', 'dataService', 'UserInfo', 
    function ($scope, dataService, UserInfo) { 
     $scope.noteEnabled = false; 
     $scope.movies = []; 
     $scope.movieCount = 0; 
     $scope.currentPage = 0; //current page 
     $scope.entryLimit = 20; //max no of items to display in a page 

     $scope.noteEnabled = UserInfo.loggedIn; 

     var getAllMovie = function() { 
      dataService.getAllMovie().then(
       function (response) { 
        $scope.movies = response.data; 
        $scope.showSuccessMessage = true; 
        $scope.successMessage = "All movie Success"; 
       }, 
       function (err) { 
        $scope.status = 'Unable to load data ' + err; 
       }); 
     }; 

     $scope.numberOfPages = function() { 
      return Math.ceil($scope.movies.length/$scope.entryLimit); 
     }; 

     getAllMovie(); 
}]);