AngularJS ng-show имеет значение true, но отображение: none остается

У меня есть две кнопки на странице, которые делают в основном то же самое. Кнопка 1 извлекает строку и выводит ее в div. Кнопка 2 извлекает одну и ту же строку и выводит ее в один и тот же div, но также извлекает код состояния. Только одна кнопка может быть нажата на каждую перезагрузку страницы. Вот урезанный вариант моего контроллера:AngularJS ng-show имеет значение true, но отображение: none остается

angular.module('myModule', []).controller('myController', [ '$scope', function($scope) { 
    self = this; 
    this.loaded = false; 
    this.msg = ''; 

    this.getMessage = new Object(blah...); 
    this.getMessage.success = function(data) { 
    self.loaded = true; 
    self.msg = data.msg; 
    $scope.$apply(function() { 
     self; 
    }); 
    }; 

    this.getStatus = new Object(blah...); 
    this.getStatus.success = function() { 
    self.getMessage(); 
    }; 

    this.button1.click(function() { 
    $.ajax(self.getMessage); 
    }); 

    this.button2.click(function() { 
    $.ajax(self.getStatus); 
    }); 
}]);

Я использую JQuery для AJAX звонки, потому что я мигрирующие из JQuery в Угловое, и я работаю с передней к задней, чтобы получить все JQuery отсеиваются , До сих пор моя страница выглядит примерно так:

<DOCTYPE html> 
<html> 
<head> 
    <!-- js/css inclusions --> 
</head> 
<body> 
    <div ng-controller='myController as ctrl'> 
    <div ng-show='ctrl.loaded' ng-bind='ctrl.msg'></div> 
    </div> 
</body> 
</html>

На странице загрузки, мой DIV выглядит следующим образом:

<div class='ng-hide' 
ng-show='ctrl.loaded' 
ng-bind='ctrl.msg' 
style='display: none'></div>

Когда кнопка 1 нажата, мой DIV превращается в:

<div class='' 
ng-show='ctrl.loaded' 
ng-bind='ctrl.msg' 
style=''>Message Here.</div>

Когда нажата кнопка 2, мой div превращается в:

<div class='' 
ng-show='ctrl.loaded' 
ng-bind='ctrl.msg' 
style='display: none'>Message Here.</div>

Этот div не создан мной, просто CSS по умолчанию из Angular для отображения/скрытия вещей. Мой вопрос: я делаю что-то неправильно? Есть ли какая-то проблема, которую я не вижу? Что-то еще, что я не делаю правильно (Угловой способ)?

Редактировать: Injected $scope сервис в мой контроллер, но все тот же результат.

источник

2014-11-03 wikenator

Поскольку HTTP-вызовы выполняются с использованием jQuery вместо использования услуги Angular $http, Angular не знает, что ваш параметр loaded изменяется и, следовательно, не обновляет представление.

Оберните код внутри обратных вызовов успеха в блоке $scope.$apply, как показано ниже, так что Angular знает, что необходимо обновить область просмотра, когда вы внесли свои изменения в параметры. Вам также потребуется ввести службу $scope в ваш контроллер.

this.getMessage.success = function(data) { 
    $scope.$apply(function() { 
     self.loaded = true; 
     self.msg = data.msg 
    }); 
};

Кроме того, вы должны использовать $scope службу, чтобы придать Params в вашей точки зрения - это то, что он там.

источник

2014-11-03 18:59:25

Есть ли у вас отредактированный код в вашем вопросе, что у вас есть в вашем контроллере? Если да, дайте ему код с предоставленным мной кодом (например: переместите параметр в блок $ $ apply). –

Я переместил параметры в блок $ $ apply, но все тот же результат ... кнопка 1 показывает сообщение, но кнопка 2 просто не позволит удалить «display: none». – wikenator

Хорошо. Возможно, что внутренняя работа Angular требует, чтобы параметры устанавливались в сервисе '$ scope' вместо самого контроллера, чтобы сформировать привязки между представлением и контроллером. например: '$ scope.loaded' вместо' this.loaded'. Используйте его в своем представлении как просто «загруженный» - вам не нужен префикс '$ scope' (' ng-show = "loaded" '). –

AngularJS ng-show имеет значение true, но отображение: none остается

ответ

Смежные вопросы