Question

我试图尽可能准确地给出这个问题我对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的呈现和分配的$ scope.players变量之间出现的轻微延迟。但这不是一个角度应用的全部意义吗？当范围变量更改时，相应的视图（及其模板）会更新吗？请帮忙！
干杯，

安德烈

Answer 1

每当你更新角度函数之外的范围变量时，你需要告诉angular有些东西发生了变化。见scope.$apply。

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

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

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

1 个答案: