AngularJS:使用$broadcast来隐藏表列

AngularJS: use $broadcast to hide table columns

本文关键字:隐藏 broadcast 使用 AngularJS      更新时间:2023-09-26

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

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

我建议将事件侦听器移动到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();
}]);