Question

要求：显示和隐藏div。

HTML

<div ng-show="IsSuccess">
  My Div Content
 </div>

HTML页面加载后

<div class="ng-hide" ng-show="false">

从控制器更新后的HTML（http post post）

 <div class="ng-hide" ng-show="true">

ng-show是true，但仍然包含ng-hide

如何解决此问题？

供参考，以下是我的控制器

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;
                        }

                    );
        }
    });

Answer 1

因为authDataService.authenticateUser返回的声明看起来像是在角度上下文之外，因此angular不知道作用域何时发生变化。在这种情况下，您需要添加$scope.$apply()

if ($scope.message == 'Login failed') {
    scope.IsSuccess= true;
}
else {
    $scope.IsSuccess= false;
}

$scope.$apply();

** 编辑：扩展说明 **

因为你要求提供更多相关细节，我会尝试进一步解释。

在角度上下文之外需要调用

$scope.$apply()。这就是我在角度背景之外的意思：

$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';

};

在这个例子中，这是日志的输出：

a
c 
// $scope.$apply() is assumed at this point
b

Angular知道在处理$scope.login()的最后一行之后需要调整其绑定，因此假设$scope.$apply()，但是Angular不知道你是否有任何其他可能的回调函数稍后通过另一个上下文调用，另一个上下文是setTimeout或jQuery的$.ajax或$.Deferred等。如果这个不同的上下文修改了$ scope，那么你需要调用{{1} }手动更新Angular绑定。

Answer 2

如果我正确理解您的问题，我会更改您的HTML以显示 <div ng-hide="IsSuccess"> My Div Content </div>

然后在你的角度文件中

$scope.login = function () {
    if(<!-- logic to hide or show-->){
        $scope.IsSuccess = false;
    }else{
        $scope.IsSuccess = true; 
    }             
}

希望这有帮助。

Answer 3

HTML code：

<button class="show-more-btn ng-hide" ng-show="hasMoreItemsToShow()" ng-click="showMoreItems()"">Show More</button>

Javascript代码：

setTimeout(function(){ $('.show-more-btn').removeClass('ng-hide'); 
       }, 3000);

即使ng-show为真，ng-hide也不会从课程中删除

3 个答案: