[英]ng-hide doesn't removed from class even when ng-show is true
Requirement : To Show and Hide a div. 要求 :显示和隐藏div。
HTML 的HTML
<div ng-show="IsSuccess">
My Div Content
</div>
HTML after page load 页面加载后的HTML
<div class="ng-hide" ng-show="false">
HTML after updated from controller (http post call) 从控制器更新后的HTML(http调用)
<div class="ng-hide" ng-show="true">
ng-show is true
but still class contains ng-hide
ng-show是
true
但类仍包含ng-hide
How to resolve this issue ? 如何解决这个问题?
For reference, below is my controller 供参考,以下是我的控制器
myController.controller('AuthenticationController',
function AuthenticationController($scope, $location, authDataService, loginDuration) {
$scope.Login = {};
$scope.IsSuccess= false;
$scope.login = function () {
authDataService.authenticateUser($scope.Login, $scope).then(
function (status) {
if (status === 200) {
if ($scope.message == 'Login failed') {
$scope.IsSuccess= true;
}
else {
$scope.IsSuccess= false;
}
}
},
function (data) {
$scope.ErrorMessage = data.Message;
}
);
}
});
Because authDataService.authenticateUser
is returning a promise that looks like it's outside of the angular context, angular doesn't know when the scope changes. 因为
authDataService.authenticateUser
返回的承诺看起来像是在超出角度上下文之外,所以角度不知道范围何时更改。 In that situation, you need to add $scope.$apply()
在这种情况下,您需要添加
$scope.$apply()
if ($scope.message == 'Login failed') {
scope.IsSuccess= true;
}
else {
$scope.IsSuccess= false;
}
$scope.$apply();
** Edit: Extended Explanation ** ** 编辑:扩展说明 **
Because you asked for more details about this, I'll try to explain a little further. 因为您要求提供更多详细信息,所以我将尝试进一步解释。
$scope.$apply() needs to be called when outside of the angular context. 在角度上下文之外时,需要调用$ scope。$ apply() 。 Here's what I mean by outside of the angular context:
这是我在角度上下文之外的意思:
$scope.login = function() {
// inside angular context
console.log('a');
setTimeout(function() {
// outside angular context
console.log('b');
$scope.hello = 'b';
// $scope.$apply() needs to be called
$scope.$apply();
}, 1000);
// inside angular context
console.log('c');
$scope.hello = 'c';
};
In this example, here's the output to the log: 在此示例中,这是日志的输出:
a
c
// $scope.$apply() is assumed at this point
b
Angular knows it needs to adjust its bindings after the last line of $scope.login()
is processed, and so $scope.$apply()
is assumed then, but Angular doesn't know if you have any other callback functions that might be called later on through another context, another context being setTimeout
or jQuery's $.ajax
or $.Deferred
, etc. If that different context modifies the $scope, then you need to call $scope.$apply()
to manually update the Angular bindings. Angular知道在处理完
$scope.login()
的最后一行之后需要调整其绑定,因此假定$scope.$apply()
,但是Angular不知道您是否还有其他可能稍后通过另一个上下文调用,另一个上下文是setTimeout
或jQuery的$.ajax
或$.Deferred
等。如果该不同的上下文修改了$ scope,则需要调用$scope.$apply()
来手动更新Angular绑定。
If I am understanding your question correctly, I would change your HTML to show <div ng-hide="IsSuccess"> My Div Content </div>
如果我正确理解了您的问题,我将更改您的HTML以显示
<div ng-hide="IsSuccess"> My Div Content </div>
and then in your angular file 然后在你的角度文件中
$scope.login = function () {
if(<!-- logic to hide or show-->){
$scope.IsSuccess = false;
}else{
$scope.IsSuccess = true;
}
}
Hopefully this helps. 希望这会有所帮助。
HTML code: HTML代码:
<button class="show-more-btn ng-hide" ng-show="hasMoreItemsToShow()" ng-click="showMoreItems()"">Show More</button>
Javascript code: JavaScript代码:
setTimeout(function(){ $('.show-more-btn').removeClass('ng-hide');
}, 3000);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.