programing

ng-change of select in angularjs에서 서비스 방법을 호출하는 방법

linuxpc 2023. 2. 25. 19:49
반응형

ng-change of select in angularjs에서 서비스 방법을 호출하는 방법

저는 앵글J는 처음입니다.ng-change select에서 factory service method '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);
        }
    };
});

위는 서비스 팩토리 방식과 컨트롤러로부터의 인스턴스화 방식입니다.ng-change select에서 인스턴스화를 시도했지만 오류가 발생하지도 않고 호출도 되지 않습니다.

코드에는 다음 두 가지 이상의 문제가 있습니다.

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

데모

언급URL : https://stackoverflow.com/questions/20674220/how-to-call-service-method-from-ng-change-of-select-in-angularjs

반응형