Szablon dyrektywy AngularJS nie aktualizuje się, jeśli zasięg jest wypełniony przez ajax

Question

Próbowałem podać to pytanie tak precyzyjnie, jak tylko mogłem.
Jestem całkiem nowy w AngularJS, ale jestem rozdeptany w tej kwestii. Próbowałem zrobić jsfiddle, aby lepiej zilustrować mój problem, ale opiera się on na zbyt wielu oddzielnych plikach. Niestety, nie jest on jeszcze dostępny w sieci, więc nie przejmuj się gadatliwością. :)

Więc w zasadzie Mam app I zbudowany z yeoman init angular, a mój app.js wygląda następująco:

"use strict" 

var myApp = angular.module("myApp", []) 
.config(function($routeProvider) { 
    $routeProvider 
    .when("/lineup", { 
     templateUrl: "views/lineup.html", 
     controller: "LineupCtrl" 
    }) 
    //other routes 
    .otherwise({ 
     redirectTo: "/" 
    }); 
}) 
.directive("playerlist", function() { 
    return { 
     restrict: "E", 
     transclude: false, 
     scope : {}, 
     templateUrl : "views/directives/playerlist.html", 
     controller : function($scope) { 
      $.get("/players") 
      .success(function(players) { 
       $scope.players = players; 
      }); 
     }, 
     replace : true 
    } 
}); 

Moi index.html podnosi app.js i ma kotwicę, która odwołuje #/lineup, która skutecznie otwiera views/lineup.html; aby uprościć rzeczy, załóżmy, że ten ostatni zawiera tylko (niestandardowy) tag <playerlist></playerlist>.
Wewnątrz funkcji kontrolera dyrektywy Jestem pewien, że $.get("/players") działa tak, jak powinien, ponieważ widzę na karcie sieciowej Chrome, że odpowiedź przychodzi poprawnie jako tablica graczy.
Wreszcie mój views/directives/playerlist.html ma kod, który zastępuje tag <playerlist>, co następuje:

<table class="table table-striped"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Age</th> 
      <th>Role</th> 
      <th>Strength</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="player in players"> 
      <td>{{player.first_name}} {{player.last_name}}</td> 
      <td>{{player.age}}</td> 
      <td>{{player.role}}</td> 
      <td>{{player.strength}}</td> 
     </tr> 
    </tbody> 
</table> 

Moim pomysłem było, aby „playerlist” dyrektywą niezależne od LineupCtrl dla mógłbym chcą używać go w innym miejscu w projekcie.
OK, więc tutaj: po kliknięciu na kotwicę, która ładuje #/lineup po raz pierwszy, element tbody powyższej tabeli jest pusty (nie dodano do niego żadnych wierszy); zabawne jest to, że gdy kliknę po raz drugi, stół jest poprawnie wypełniony przez graczy, których otrzymałem z instrukcją $.get("/players"). Podejrzewam, że jest to spowodowane niewielkim opóźnieniem, które występuje pomiędzy renderowaniem playerlist.html i przypisywaną zmienną $ scope.players. Ale czy to nie jest cały punkt aplikacji kątowej? To, kiedy zmieniają się zmienne zasięgu, poszczególne widoki (i ich szablony) są aktualizowane?
Proszę pomóc!
Cheers,

Andrea

Answer 1

każdej aktualizacji zmiennych, zakres poza kątowym funkcji, trzeba powiedzieć, że coś się zmieniło kanciasty. Zobacz scope.$apply.

$.get("/players") 
.success(function(players) { 
    $scope.$apply(function() { 
    $scope.players = players; 
    }); 
}); 

Na innej notatki, kątowa posiada wbudowany ajax service, więc nie ma potrzeby korzystania z jQuery. Dobre wyjaśnienie można znaleźć w samouczku: 5 - XHRs & Dependency Injection.