如何从angularjs中选择的ng-change调用服务方法？

Posted 2023-02-21

【中文标题】如何从angularjs中选择的ng-change调用服务方法？

【英文标题】：how to call service method from ng-change of select in angularjs?

【发布时间】：2014-01-07 13:55:30

【问题描述】：

我是 Angular js 的新手。我正在尝试从 select 的 ng-change 调用工厂服务方法“getScoreData”，但无法完成。请帮忙。

html代码：

<select ng-model="Score" ng-change="getScoreData(Score)" ng-options="c.name for c in     Scores"></select>

Angularjs 代码：

var app = angular.module('audiapp', []);

app.controller('audiLayoutCtrl', function ($scope, ScoreDataService) 
    ScoreDataService.getScoreData($scope.Score, function (data) 
        $scope.ScoreData = data;
    );
);

app.factory('ScoreDataService', function ($http) 
    return 
        getScoreData: function (Score, callback) 
            var params = 
                questionCode: Score.code
            

            return $http(
                url: 'Home/GetAvgData',
                method: 'GET',
                params: params
            ).success(callback);
        
    ;
);

上面是服务工厂方法及其从控制器的实例化。我尝试从 select 的 ng-change 实例化，但它既没有给出错误也没有被调用。

【参考方案1】：

您的代码中至少有两个问题：

ng-change="getScoreData(Score)

Angular 没有看到引用已定义服务的 getScoreData 方法

getScoreData: function (Score, callback)

我们不需要使用回调，因为GET 返回承诺。请改用then。

这是一个工作示例（我仅使用随机地址进行模拟）：

HTML

<select ng-model="score"
        ng-change="getScoreData(score)" 
        ng-options="score as score.name for score in  scores"></select>
    <pre>ScoreData|json</pre> 

JS

var fessmodule = angular.module('myModule', ['ngResource']);

fessmodule.controller('fessCntrl', function($scope, ScoreDataService) 

    $scope.scores = [
        name: 'Bukit Batok Street 1',
        URL: 'http://maps.googleapis.com/maps/api/geocode/json?address=Singapore, SG, Singapore, 153 Bukit Batok Street 1&sensor=true'
    , 
        name: 'London 8',
        URL: 'http://maps.googleapis.com/maps/api/geocode/json?address=Singapore, SG, Singapore, London 8&sensor=true'
    ];

    $scope.getScoreData = function(score) 
        ScoreDataService.getScoreData(score).then(function(result) 
            $scope.ScoreData = result;
        , function(result) 
            alert("Error: No data returned");
        );
    ;

);

fessmodule.$inject = ['$scope', 'ScoreDataService'];

fessmodule.factory('ScoreDataService', ['$http', '$q', function($http) 

    var factory = 
        getScoreData: function(score) 
            console.log(score);
            var data = $http(
                method: 'GET',
                url: score.URL
            );


            return data;
        
    
    return factory;
]);

演示Fiddle