1

angularJSをいじり始めたばかりなので、簡単にできることをお願いしているのかもしれませんが、その方法が見つかりません。状況は次のとおりです。スコープされたコントローラー変数から値を取得する ng-repeat によって設定されたリストがあります。この変数は、jsonp 呼び出しによってページの読み込み時に読み込まれ、これは正常に機能します。別の選択に基づいてこのリストをリロードする必要があるときに問題が発生します。たとえば、選択で「日」の値を選択すると、いくつかの値を表示する必要があり、「週」を選択すると他の値を表示する必要があります (これも ajax 経由でロードされます)。

私が試したのは、データをロードして返すサービスを用意することです。コントローラーには、最初のロード用と変数で $scope.apply を実行する 2 番目のメソッドの 2 つのメソッドがあります。次に、select 値の変更時にこの 2 番目のメソッドを呼び出します (これを修正できるまで単純化するために jquery で実行しました)。

これは私のHTMLの一部です

<div x-ng-controller='LeaderboardCtrl'>
    <select id='leaderboard-select'>
        <option value='day'>day</option>
        <option value='week'>week</option>
        <option value='month'>month</option>
    </select>
    <div x-ng-repeat='p in leaderboard'>
        <p>{{p}}</p>
    </div>
</div>

これは、この機能に影響を与えるコードの一部です

var lead = angular.module("lead",[]);

function LeaderboardCtrl($scope,$attrs,$http,jtlanService) {
    $scope.leaderboard = [];
    $scope.period = 'day';

    var data = {
        period:$scope.period
    };

    $scope.loadLeaderboard = function(){
        myService.loadLeaderboard(data).then(function(leaderboard) {
            $scope.leaderboard = [];
            $scope.leaderboard.push.apply($scope.leaderboard,leaderboard);
        });
    }

    $scope.reloadLeaderboard = function() {
        myService.loadLeaderboard(data).then(function(leaderboard) {
            $scope.$apply(function() {
                $scope.leaderboard = [];
                $scope.leaderboard.push.apply($scope.leaderboard,leaderboard);
            });
        });
    }

    $scope.loadLeaderboard()
}

lead.service("myService",["$http", function($http) {
    var myService = {
        loadLeaderboard : function(data) {
            var promise = $http.jsonp("/widget/leaderboardJSONP?callback=JSON_CALLBACK&_="+new Date(),{
                params:data,
                cache:false,
                ajaxOptions: { cache: false }
            }).then(function(response) {
                return response.data;
            });
            return promise;
        }
    };
    return myService;
}]);

$("#leaderboard-select").change(function(){
    scope.period = $("#leaderboard-select").val();
    scope.reloadLeaderboard();
});

ここにコードのフィドルがあります：http://jsfiddle.net/WFGqN/3/

4

1 に答える 1

2

あなたのフィドルは問題だらけです：

  1. ng-appあなたのマークアップにはありません
  2. 2 番目の Framework Extensions ドロップダウンを「ラップなし」オプションのいずれかに変更する必要があります。
  3. サービスはコントローラーの上で定義する必要があります
  4. コントローラーは「jtlanService」を参照していますが、「myService」を定義しています
  5. 呼び出しはそのままでは機能しませ$http.jsonpんが、echo サービス (左側の Ajax リクエストを参照) を使用してリクエストをエミュレートできます。
  6. jQuery イベントを使用して Angular コントローラーを呼び出すことはできません。ng-changeand notを使用する必要があり$().changeます (イベント バインディングに jQuery を使用していた場合でも、 を使用する必要があります$().on('change'))。
  7. 関数を呼び出すときは、すでに $apply 呼び出しの内部にいたため、関数で使用$scope.$applyする必要はありませんでした。loadLeaderboard
  8. 2 つの load+reload リーダーボード メソッドは必要ありません。
  9. 結局のところ、jQuery は実際には必要ありません。

ここに問題を修正するフィドルがあります。私はあなたが望むものを手に入れると思います: http://jsfiddle.net/WFGqN/5/。もちろん、サービスを自分で修正する必要がありますが、アイデアは得られます。

このSOの回答を読むことをお勧めします: 「AngularJSで考える」jQueryのバックグラウンドがある場合は?

于 2013-04-23T15:34:50.783 に答える