¿cómo llamar al método de servicio de ng-change of select en angularjs?

Question

¿cómo llamar al método de servicio de ng-change of select en angularjs?

Soy nuevo en angular js. Estoy tratando de llamar al método de servicio de fábrica 'getScoreData' de ng-change of select,pero no puedo hacerlo. por favor, ayuda.

Código html:

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

Código 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);
        }
    };
});

Arriba está el método service factory y su instanciación desde el controlador. Intenté instanciar desde ng-change de select, pero no da error ni es llamado.

31

angularjs angularjs-service angularjs-directive angularjs-factory angularjs-ng-change

Author: Samir Shah, 2013-12-19

Source

1 answers

score 57 · Accepted Answer

Tiene al menos dos problemas en su código:

ng-change="getScoreData(Score)

Angular no ve getScoreData método que se refiere al servicio definido
getScoreData: function (Score, callback)

No necesitamos usar callback ya que GET devuelve promise. Use then en su lugar.

Aquí hay un ejemplo de trabajo (usé la dirección aleatoria solo para la simulación):

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;
}]);

Demo Fiddle