Требование : Показать и скрыть div.
HTML
<div ng-show="IsSuccess">
My Div Content
</div>
HTML после загрузки страницы
<div class="ng-hide" ng-show="false">
HTML после обновления с контроллера (http post call)
<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;
}
);
}
});
Поскольку authDataService.authenticateUser
возвращает обещание, похожее на него вне углового контекста, угловой не знает, когда изменяется область действия. В этой ситуации вам нужно добавить $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()
$scope.login()
предполагается тогда, но Angular не знает, есть ли у вас другие функции обратного вызова, которые могут $.ajax
позже через другой контекст, другой контекст - setTimeout
или jQuery $.ajax
или $.Deferred
и т.д. Если этот другой контекст изменяет область $, тогда вам нужно вызвать $scope.$apply()
вручную обновить Angular привязок.
Код HTML:
<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);
Если я правильно понимаю ваш вопрос, я бы изменил ваш 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;
}
}
Надеюсь, это поможет.
<div class="ng-hide" ng-show="true">
. Я имею в виду нг-скрыть все еще там
class='ng-hide'
, директива ngShow обрабатывает это сама.