AngularJS:使用$broadcast来隐藏表列
AngularJS: use $broadcast to hide table columns
我正试图使用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();
}]);
相关文章:
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 显示5秒后隐藏潜水
- 在不使用JQuery的情况下隐藏DOM中的选定元素
- 剑道UI内联编辑:如何在点击其他按钮时隐藏按钮
- 浮动页脚栏-使用Bootstrap隐藏
- 在jquery中为显示/隐藏设置cookie
- 单击按钮后如何逐个调用分区,上一个分区将隐藏
- 从var向代码隐藏函数传递值
- Image赢得't隐藏在滚动jQuery上
- 具有rowGrouping的数据表无法隐藏列
- Jquery隐藏未触发
- JavaScript 检查隐藏字段中的值并将其设置为隐藏字段值
- 分部隐藏在jquery中不起作用
- 点击后隐藏潜水?(但如果Div是一面旗帜呢?)
- javascript.点击隐藏事件故障
- 禁用(而不是隐藏)浏览器滚动条
- PHP Javascript显示/隐藏按钮不工作
- 在mvc应用程序中,在回发时保留最初隐藏的文本框的隐藏或可见状态
- 如何通过溢出来判断元素被切断了多少像素:隐藏在父级上
- AngularJS:使用$broadcast来隐藏表列