2015-12-04 2 views
0

У меня есть следующие в моем HTML:Угловая JS Controller - Scope вопрос (возможно)

<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.

+0

Вам нужно проверить несколько вещей, сначала проверьте, успешно ли отправлен запрос, и он вызывает функцию create или нет, а также вместо использования $ .post используйте службу $ http угловой. И попробуйте использовать $ scope. $ Apply() в последней строке функции create, и если она работает, то очевидно, что это проблема с самой $ .post. – Indra

+0

Я могу определенно подтвердить, что создается вызов, потому что, когда я console.log (vm), он показывает правильное значение count и показывает showOne как true. Должен ли я по-прежнему использовать HTTP-протокол? – thb7

ответ

2

На самом деле вы используете $ .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 & $ объем в контроллере соответственно.

0

Попробуйте добавить свою функцию обновления в vm.

vm.action = action; 

Если вы этого не сделаете, его нельзя вызывать за пределами закрытия (т. Е. В вашем html).

+0

Что вы подразумеваете под обновлением? Действие? Или новая функция? – thb7

+0

Жаль, что я на мобильный, отредактировал мой ответ. Я имел в виду действие, не обновляющееся –

+0

Обновленный вопрос - я сильно испробовал мой код. Благодаря! – thb7

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