16

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

所以基本上我有一个我用 构建的应用程序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 的呈现和被分配的 $s​​cope.players 变量之间发生的轻微滞后。但这不是 Angular 应用程序的全部意义所在吗？当范围变量更改时，相应的视图（及其模板）会更新吗？
请帮忙！
干杯，

安德里亚

4

1 回答 1

40

每当您在 Angular 函数之外更新范围变量时，您都需要告诉 Angular 发生了一些变化。见scope.$apply。

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

另一方面，Angular 有一个内置的ajax 服务，所以不需要使用 jQuery。可以在教程中找到一个很好的解释：5 - XHRs & Dependency Injection。

于 2013-02-20T16:41:23.043 回答