AngularJS:使用$ broadcast隐藏表列

时间:2016-03-28 02:23:29

标签: javascript angularjs

我正在尝试使用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 
                }
            ]
        )

以前,我使用会话检查用户是否已登录,但现在我使用广播将用户名传递给控制器​​。同样我试图将用户名传递给这个控制器它不起作用。我真的需要一个帮助。提前谢谢。

1 个答案:

答案 0 :(得分:1)

我建议您在.then()服务电话的getAllMovie()之外移动您的事件监听器。如果在{1}}事件在该承诺解决之前广播,会发生什么?以下是我建议重构代码的方法(我删除了您注入的模块,但没有使用):

更新:问题可能是您在广播事件时未实例化具有事件侦听器的控制器。这是一个猜测,因为它不清楚这些是一个视图,不同的视图等。我建议将登录状态存储在一个值中。 这只是一个例子 - 它可能不是最好的方式,也可能不是满足您所需要的所有方式。我还没有对此进行测试,因此您可能需要使用它来使其按照您想要的方式工作。以下是我更新的推荐代码:

passuser