我试图给这个问题尽可能精确的标题。 我对AngularJS还是很陌生,但是在这个问题上我很固执。我试图制作一个jsfiddle来更好地说明我的问题,但是它依赖于太多单独的文件。而且a还没有在线上,所以请耐心等待。:)
因此,基本上,我有一个使用构建的应用程序yeoman init angular,其app.js外观如下:
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>标签的代码,如下所示:
index.html
#/lineup
views/lineup.html
<playerlist></playerlist>
$.get("/players")
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变量之间发生了微小的延迟。但是,这不是角度应用程序的重点吗?当范围变量更改时,相应的视图(及其模板)是否会更新? 请帮忙! 干杯,
LineupCtrl
tbody
安德里亚
每当在角度函数之外更新范围变量时,都需要告诉angular某些更改。请参阅scope.$apply。
scope.$apply
$.get("/players") .success(function(players) { $scope.$apply(function () { $scope.players = players; }); });
另外,angular具有内置的ajax服务,因此不需要使用jQuery。在教程中可以找到很好的解释:5-XHRs和依赖注入。