javascript - 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 代码:

.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 
                }
            ]
        )

以前，我使用 session 来检查用户是否登录，但现在我使用广播将用户名传递给 Controller ​​。同样，我试图将用户名传递给该 Controller ，但它不起作用。我真的需要帮助。提前致谢。

Answer 1

我建议将事件监听器移到 getAllMovie() 服务调用的 .then() 之外。如果在 promise 解决之前广播 passuser 事件会发生什么？以下是我建议如何重构您的代码(我删除了您注入(inject)但未使用的模块):

更新:问题可能是您在广播事件时没有实例化具有事件监听器的 Controller 。这是一个猜测，因为不清楚这些是一个 View 、不同 View 等。我建议将登录状态存储在一个值中。 这只是一个示例 - 它可能不是最好的方法，也不是可以满足您所有需求的方法。我还没有对此进行测试，因此您可能需要尝试一下才能让它按照您想要的方式工作。这是我更新后的推荐代码:

.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();
}]);