1

我刚开始玩 angularJS，所以也许我在问一些容易做的事情，但我找不到方法。情况如下：我有一个由 ng-repeat 填充的列表，该列表从作用域控制器变量中获取值。这个变量是通过 jsonp 调用在页面加载时加载的，这很好用。当我需要根据另一个选择重新加载此列表时，问题就来了。例如，如果在选择中选择“天”值，我需要显示一些值，而当我选择“周”时，我需要显示其他值（也通过 ajax 加载）。

我尝试过的是拥有一个加载数据并返回它的服务，并且在控制器中有两种方法，一种用于第一次加载，另一种用于使用变量执行 $scope.apply 的第二种方法。然后我在选择值更改时调用第二种方法（我已经用 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. 您需要将第二个 Framework Extensions 下拉列表更改为“No wrap”选项之一
  3. 您的服务需要在您的控制器之上定义
  4. 您的控制器正在引用“jtlanService”，但您已经定义了“myService”
  5. 您的$http.jsonp呼叫不会按原样工作，但您可以使用可以使用 echo 服务（请参阅左侧的 Ajax 请求）来模拟请求
  6. 您不能也不应该使用 jQuery 事件来调用 Angular 控制器。您应该使用ng-change而不是$().change（即使您使用 jQuery 进行事件绑定，您也应该使用$().on('change')）。
  7. 您不需要$scope.$apply在loadLeaderboard函数中使用，因为当您调用它时，您已经在 $apply 调用中。
  8. 不需要 2 种加载+重新加载排行榜方法。
  9. 毕竟，您实际上并不需要 jQuery。

这是一个可以解决问题的小提琴，我认为可以满足您的需求：http: //jsfiddle.net/WFGqN/5/。您当然需要最终修复服务，但您明白了。

如果我有 jQuery 背景，我建议阅读这个 SO 答案： “Thinking in AngularJS”？

于 2013-04-23T15:34:50.783 回答