一尘不染

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

angularjs

我试图给这个问题尽可能精确的标题。
我对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变量之间发生了微小的延迟。但是,这不是角度应用程序的重点吗?当范围变量更改时,相应的视图(及其模板)是否会更新?
请帮忙!
干杯,

安德里亚


阅读 189

收藏
2020-07-04

共1个答案

一尘不染

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

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

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

2020-07-04