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を参照するアンカーを持っています。簡単にするために、後者には（カスタム）タグのみが含まれていると仮定しましょう。ディレクティブのコントローラー関数内では、応答がプレーヤーの配列として正しく送信されることがクロムのネットワーク タブからわかるので、 正常に機能すると確信しています。 最後に、次のタグを置き換えるコードがあります。#/lineupviews/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>

LineupCtrl私のアイデアは、プロジェクトの他の場所で再利用したい場合があるため、「playerlist」ディレクティブを独立させることでした。最初
に読み込まれるアンカーをクリックすると、上のテーブルの要素は空です (行が追加されていません)。面白いことに、2 度目にクリックすると、指示に従って取得したプレーヤーがテーブルに正しく表示されます。これは、playerlist.html のレンダリングと $scope.players 変数の割り当ての間に発生するわずかな遅延が原因であると思われます。しかし、それがAngularアプリの要点ではありませんか? スコープ変数が変更されると、それぞれのビュー (およびそのテンプレート) が更新されますか? 助けてください！ 乾杯、 アンドレア#/lineuptbody$.get("/players")



4

1 に答える 1

40

角度関数の外でスコープ変数を更新するときはいつでも、何かが変更されたことを角度に伝える必要があります。を参照してください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 に答える