如果范围通过AJAX填充AngularJS指令模板没有更新 [英] AngularJS directive template not updating if scope is populated via ajax

问题描述

我试着给这个问题以precise标题尽我所能。

我是pretty新AngularJS但我踩在这个问题上。我试图做一个的jsfiddle更好地说明我的问题，但它依赖于太多单独的文件。唉它是不在线呢，所以用冗长承担。 :)


所以基本上我有一个应用程序我和自耕农的init角，我的 app.js 看起来像这样构建的：

I tried to give this question as precise a title as I could.
I'm pretty new to AngularJS but I'm stomped on this issue. I tried to make a jsfiddle to better illustrate my issue but it relies on too many separate files. And alas it is not online yet, so bear with the verbosity. :)

So basically I have an app I built with yeoman init angular, and my app.js looks like this:

"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.html ;把事情简单化，我们假设后者只包含（自定义）＆LT; playerlist＆GT;＆LT; / playerlist方式＆gt; 标记

内部指令的控制器的功能，我敢肯定， $。获得（/播放器）的作品，因为它应该，因为我可以从响应来自通过正确Chrome的网络选项卡中看到作为玩家的阵列。

最后，我的的意见/指令/ playerlist.html 有code，它取代了＆LT; playerlist＆GT; 标签，其中如下：

My index.html picks up app.js and has an anchor that references #/lineup, which effectively opens views/lineup.html; to simplify things, let's assume the latter only contains the (custom) <playerlist></playerlist> tag.
Inside the directive's controller function I'm sure that $.get("/players") works as it should because I can see from chrome's network tab that the response comes through correctly as an array of players.
Finally, my views/directives/playerlist.html has the code that replaces the <playerlist> tag, which follows:

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

我的想法是让独立于 LineupCtrl 的playerlist指令，因为我可能要在其他项目中重复使用它。

好了，所以这里有云：当我点击锚的负荷＃/阵容第一次，在 TBODY 元素上表是空的（没有行追加到它）;有趣的是，当我点击它第二次，该表正确填入玩家我得到 $。获得（/播放器）指令。我怀疑这是由于playerlist.html分配渲染和$ scope.players变量之间存在发生轻微的迟滞。但是，这不是一个角度应用程序的整点？当作用域变量改变各自的意见（和他们的模板）更新？

请帮帮忙！

干杯，


安德烈

My idea was to make the "playerlist" directive independent from LineupCtrl for I might want to reuse it elsewhere in the project.
Ok so here goes: when I click on the anchor that loads #/lineup the first time, the tbody element of the above table is empty (no rows appended to it); the funny thing is, when I click on it a second time, the table is correctly populated with the players I get with the $.get("/players") instruction. I suspect this is due to the slight lag that occurs between the rendering of playerlist.html and the $scope.players variable being assigned. But isn't that the whole point of an angular app? That when scope variables change the respective views (and their templates) are updated?
Please help!
Cheers,

Andrea

推荐答案

每当您更新角度的功能范围之外的变量，你需要告诉角的东西改变了。请参见 范围。$适用 。

Whenever you update scope variables outside of an angular function, you need to tell angular that something changed. See scope.$apply.

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

在一个不同的说明，角有一个内置的阿贾克斯服务的，所以没有必要使用jQuery的。一个很好的解释可以在教程中找到： 5 - XHR时与放大器;依赖注入。

On a different note, angular has a built in ajax service, so there is no need to use jQuery. A good explanation can be found in the tutorial: 5 - XHRs & Dependency Injection.

这篇关于如果范围通过AJAX填充AngularJS指令模板没有更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！