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

我尽量给这个问题一个准确的标题。
我对AngularJS很陌生，但在这个问题上我被踩了一脚。我试图制作一个JSFIDLE来更好地说明我的问题，但它依赖于太多的独立文件。唉，它还没有上线，所以请容忍冗长的内容。：）

所以基本上我有一个我用

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

的锚，它有效地打开了

视图/lineup.html

；为了简化，我们假设后者只包含（自定义）

标记。
在指令的控制器功能中，我确信

$.get（“/players”）

能够正常工作，因为我可以从chrome的网络选项卡上看到响应作为一个播放器数组正确通过。
最后，我的

views/directives/playerlist.html

中有一段代码替换了

标记，如下所示：

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

名称
年龄
角色
力量
{{player.first{u name}{{player.last{u name}}
{{player.age}
{{player.role}
{{玩家力量}

我的想法是使“playerlist”指令独立于

LineupCtrl

，因为我可能希望在项目的其他地方重用它。
好的，现在开始：当我第一次单击加载

#/lineup

的锚时，上表的

tbody

元素为空（没有附加行）；有趣的是，当我第二次单击它时，表中正确地填充了我使用

$.get（“/players”）

指令获得的播放器。我怀疑这是由于playerlist.html的呈现与分配的$scope.players变量之间出现了轻微的延迟。但这不是一个有角度的应用程序的全部要点吗？当范围变量更改时，相应的视图（及其模板）会更新吗？
请帮忙
干杯，

---

Andrea

每当你更新角度函数之外的范围变量时，你需要告诉angular有什么变化。看

---

另一方面，angular具有内置的，因此不需要使用jQuery。在教程中可以找到一个很好的解释：。

感谢您快速准确的回复！这正是我需要的！如果可以的话，我会投票支持它，但不幸的是，我缺乏声誉…：（关于你的旁白：我将研究angular内置ajax服务的使用。我使用jQuery是因为底层模型层依赖于本地运行的节点服务器，该服务器从本地mysql数据库获取数据。我可以通过调用

$.get（“/players”）

从中进行抽象，因为在另一个文件中（即

lib.js

）我有一个函数

$.ajaxPrefilter（函数（选项）{options.url=”http://localhost:3000“+options.url；options.crossDomain=true；options.async=false；返回“jsonp”；}）；

（由于我的应用程序在localhost:3501（yeoman的默认服务器）上运行，并且节点在localhost:3000上运行，因此需要跨域）。我将坚持使用jQuery，直到我找到一种用纯角度实现相同功能的方法（我发现学习曲线非常陡峭）。另外，如果我现在发布

$http.get（“/players”）

，它将查找

http://localhost:3501/players

，它不存在。再次感谢！干杯！@AndreaAloi听起来像是一个很好的设置！；）祝你好运！谢谢你非常简洁的回答和例子。这正是我需要的。好问题！谢谢

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