如果通过Ajax填充范围，则AngularJS指令模板不会更新

Question

我试图给这个问题尽可能精确的标题。
我对AngularJS还是很陌生，但是在这个问题上我很固执。我试图制作一个jsfiddle来更好地说明我的问题，但是它依赖于太多单独的文件。而且a还没有在线上，所以请耐心等待。:)

因此，基本上，我有一个使用构建的应用程序yeoman init angular，其app.js外观如下：

"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
    }
});

我index.html拿起app.js并有一个参考的锚#/lineup，它有效地打开views/lineup.html;
为简化起见，我们假设后者仅包含（自定义）<playerlist></playerlist>标签。
在指令的控制器函数内部，我确信它$.get("/players")可以正常工作，因为从chrome的网络标签中可以看到，响应作为一组播放器正确传递。
最后，我views/directives/playerlist.html有替换<playerlist>标签的代码，如下所示：

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

我的想法是使“ playerlist”指令独立于，LineupCtrl因为我可能想在项目中的其他地方重用它。
好的，这里是这样：当我单击#/lineup第一次加载的锚点时，tbody上表的元素为空（没有附加行）；有趣的是，当我第二次单击它时，桌子上的$.get("/players")指令正确地填充了我得到的球员。我怀疑这是由于在playerlist.html的呈现和分配的$
scope.players变量之间发生了微小的延迟。但是，这不是角度应用程序的重点吗？当范围变量更改时，相应的视图（及其模板）是否会更新？
请帮忙！
干杯，

安德里亚

Answer 1

每当在角度函数之外更新范围变量时，都需要告诉angular某些更改。请参阅scope.$apply。

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

另外，angular具有内置的ajax服务，因此不需要使用jQuery。在教程中可以找到很好的解释：5-XHRs和依赖注入。