В моем HTML есть следующее:
<body ng-controller = "Control as control">
<button ng-click = "control.prepareAction()">Do Action </button>
<div id="one" ng-hide = "!control.showOne" >
<div>
<h6> {{control.name}}</h6>
<p> Bills Sponsored: {{control.count}} <p>
</div>
</body>
И в моем Javascript:
var vm = this;
vm.name = "My Name"
vm.prepareAction = function(){
action(parseFirst(), parseLast()); //The two parse functions simply get values from an HTML form. This works correctly.
}
function action(first, last) {
$.post('php/one.php', {
first: first,
last: last
},
function(data) {
create(JSON.parse(data));
});
return values;
}
function create(data) {
var countArray = data[0];
vm.count = countArray[0];
vm.showOne = true;
}
Эта функция не обновляет значения showOne (div всегда скрыт) или count (он пуст, когда я устанавливаю ng-hide в false) в HTML. Однако, когда я устанавливаю значение ng-hide в false, оно правильно отображает имя. Это заставляет меня думать, что это проблема с областью, однако, когда я печатаю значение vm на консоли, значения для showOne и count правильны. Это подтверждается расширением Chrome ng-inspector.
Фактически вы используете $.post, который находится вне контекста угловых js, поэтому из метода создания цикл дайджест работает правильно. Поэтому для его решения есть два варианта.
Либо вместо $.post вам нужно использовать
$http({
method: 'POST',
url: 'php/one.php'
}).then(function successCallback(response) {
create(JSON.parse(response));
}, function errorCallback(response) {
});
Или вам нужно немного изменить функцию создания
function create(data) {
var countArray = data[0];
vm.count = countArray[0];
vm.showOne = true;
$scope.$apply();
}
И в обоих случаях вам необходимо ввести $ http & $ scope в контроллер соответственно.
Попробуйте добавить функцию обновления в vm.
vm.action = action;
Если вы этого не сделаете, его нельзя вызывать за пределами закрытия (т.е. В вашем html).