Угловое асинхронное время

Question

Я работаю над обновляющим списком, который показывает информацию о некоторых пользователях. Он должен показать свой логотип, имя и, если они будут в сети. В настоящее время я хватаю каналы и помещаю их в три массива. Один массив для информации о канале Twitch, который содержит информацию обо всех каналах. Один массив, который содержит имя_экземпляра онлайн-пользователей. Один массив, содержащий имя display_name для автономных пользователей.

В настоящее время он работает, но работает только если вы нажмете кнопку начала. Почему кнопка нужна и как я могу сделать список заполненным без кнопки?

http://codepen.io/crosscris/pen/ZGEOor?editors=101

var app = angular.module('FCCTwitchChecker', []); 
    app.controller('FCCTwitchController', function() { 
    var TwitchCheck = this; 
    var FCCstreamers = ["freecodecamp", "storbeck", "terakilobyte", "habathcx","notmichaelmcdonald","RobotCaleb", "medrybw","comster404","brunofin","thomasballinger","joe_at_underflow","noobs2ninjas","mdwasp","beohoff","xenocomagain"]; 
     TwitchCheck.AllUsersChannelObjects = []; 
    TwitchCheck.OfflineUsers = []; 
    TwitchCheck.OnlineUsers = []; 
     var BeginningURL= "https://api.twitch.tv/kraken/"; 
    FCCstreamers.forEach(function(streamer){ 
     var streamURLstring = BeginningURL + "streams/" + streamer + "?client_id=1234chrisclientid4321&callback=?"; 
     var channelURLstring = BeginningURL +"channels/" + streamer + "?client_id=1234chrisclientid4321&callback=?"; 
    $.ajax({ 
     type: "GET", 
     dataType: "json", 
     url: streamURLstring, 
     success: function(result) { 
      if(result.stream === null || result.error==="Not Found") { 
      TwitchCheck.OfflineUsers.push(streamer); 
      } else { 
      TwitchCheck.OnlineUsers.push(streamer); 
      } 
     }, 
     error: function() { 
      console.log("It failed"); 
     } 
     }); 
     $.ajax({ 
     type: "GET", 
     dataType: "json", 
     url: channelURLstring, 
     success: function(result) { 
      if (result.error !== "Not Found") { 
      TwitchCheck.AllUsersChannelObjects.push(result); 
      if (result.logo === null) { 
       TwitchCheck.AllUsersChannelObjects[TwitchCheck.AllUsersChannelObjects.length - 1].logo === "http://placehold.it/350x150"; 
      } 
      } 
     }, 
     error: function() { 
      console.log("It failed"); 
     } 
     }); 
    }); 
    TwitchCheck.showArray = function() { 
     console.log(TwitchCheck.AllUsersChannelObjects);  
    } 
    TwitchCheck.OnorOff = function(ChannelName) { 
      if(TwitchCheck.OnlineUsers.indexOf(ChannelName.name) !== -1) { 
     return "on"; 
     } else { 
     return "off"; 
     } 
    }  
    }); 

я был дан список display_names и некоторые из отображаемых имен не являются действительными каналов. Я считаю, что ajax/angular застревает, пытаясь найти информацию о недействительных каналах, но я не уверен.

Answer 1

Поскольку HTTP-вызов jQuery находится вне цикла Angular digest (это асинхронный вызов), вам необходимо вручную запустить этот цикл дайджеста, используя $scope.$apply() с вашего контроллера в обратном вызове success.

См пример здесь: http://codepen.io/anon/pen/oXgqGM

Однако, как это было предложен mcranston18 на комментарии, то лучше использовать $http службы угловой, а не JQuery, так как она заботится о масштабах пищеварения, и вы не нужно сделать это самостоятельно.

Answer 2

Это связано с тем, что в течение цикла $digest Angular обновляет все свои взгляды на основе различий.

Он использует цикл проверки всех своих детей и детей своих детей ребенка и т. Д., Так что он работает только с проверкой, когда он что-то знает.

... но единственный способ узнать что-то изменилось, автоматически, если это изменение связано с событием в системе углов.

Теперь эти изменения могут быть настолько волшебными и настолько скрытыми, что вы никогда не замечали и не думали о них.
Это совершенно нормально. Мы все были в этом месте, и это означает, что команда ng сделала большую работу по скрыть эти сложности, чтобы сделать этот процесс незабываемым.

Но за пределами углового захвата данных или изменения данных, а затем достижения в мир углов снаружи, чтобы совать на угловые значения, не является чем-то, что Угловая знает, как проверить.

Причина, по которой она работает, когда вы нажимаете кнопку, состоит в том, что она вызывает скрытое событие, которое сообщает Angular: «После запуска этого события (и все его подпрограммы) выполните дайджест и примените все изменения на основе разницы вы найдете. "

Это (или подобное) - это клей, который хранит Угловые (и Реагирует и ... Библиотека-X) магические.

Чтобы Угловая счастливым, используйте $http