AngularJS関数の外で関数を正しく呼び出すにはどうすればいいですか？

Question

私はAngularJSを初めて使用しており、JSONファイルからデータを抽出するコードを記述しようとしています。 私はGET関数を書きましたが、関数の外でGET関数を呼び出すことにしました。

私はgetDataの機能を持っており、最後の行にはvar questions = getData'~~~'があります。私はこれが私のコードで間違っていると思います。 DataFactory関数の外側にあるgetData関数を呼び出すにはどうすればよいですか。

(function(){ 
angular 
    .module("GrammarQuiz") 
    .factory("DataService", DataFactory); 

    function DataFactory($log, $http){ 
     var vm = this 
     var dataObj = { 
     questions: questions 
     }; 
     vm.sort = sort; 
     vm.random = random; 
     vm.getData = getData; 
     var temp = 0; 

     // right now I have questions variable here 
     // but I want to move this to the outside of the function 
     //var questions = getData('data1.json'); 

     function getData(apicall){ 
      $log.log('begin!!!'); 
      $http.get('api/' + apicall, 
        {headers: 
         {token: 'check!'} 
        } 
      ).then(function(response){ 
       $log.log(response.data);  
       questions = response.data; 
       }, function(response){ 
        $log.log(response.data || "Request failed"); 
       }); 
     } 
     function sort(array) { 
      return array.sort(function() { 
      return .5 - Math.random(); 
      }); 
     } 
     function random() { 
      for (var key in dataObj.questions) { 
      dataObj.questions[key].Choices = sort(dataObj.questions[key].Choices); 
      } 
     } 
     random(); 
     return dataObj; 
    } 

    var questions = DataFactory.getData('data1.json'); 
})(); 

Answer 1

、あなたのコントローラにあなたのサービスを注入する必要があります。このような何かが動作します：

(function(){ 
    var myApp = angular.module('myApp',[]); 

    angular 
    .module("myApp") 
    .controller("MyCtrl", MyCtrl); 

    MyCtrl.$inject = ["myApp.myService"]; //injects your service into your controller 

    function MyCtrl(dataservice) { 
     var vm = this; 
     vm.name = 'Superhero'; 
     //calls the service 
     dataservice.getData(); 
    } 

    angular.module("myApp").factory("myApp.myService", function() { 
     //exposes the service's methods 
     //you need this, vs the vm syntax in your service 
      var service = { 
      getData: getData 
     }; 

     return service; 

    function getData(){ 
     alert("S"); 
    } 
    }); 
})(); 

JSFiddle：http://jsfiddle.net/Lvc0u55v/8234/

Answer 2

「工場」または「サービス」ファイルでAPI呼び出しを行う必要があります。次に、 'Controller'ファイルのFactoryファイルの 'get'メソッドを呼び出します。コードの分離が必要なので、 は工場とコントローラを利用します。

は、以下の例を参照してください：私は私のコメントで述べたように

# user.factory.js 
# 'app.foo.user' refers to your directory structure i.e. app/foo/user/user.factory.js 

(function() { 
    'use strict'; 

    angular 
     .module('app.foo.user', []) 
     .factory('userSvc', UserService); 

    /* @ngInject */ 
    function UserService(
     $log, 
     $q, 
     $http, 
     $window, 
     $state, 
     logger, 
     session, 
     utils, 
     API_CONFIG) { 

     var ENDPOINTS = { 
      USERS: '/v1/users' 
     }; 

     /** 
     * @ngdoc service 
     * @name app.foo.user 
     * @description User management 
     */ 
     var service = { 
      get: get 
     }; 

     /** 
     * @ngdoc method 
     * @name get 
     * @description Returns all users 
     * @methodOf app.foo.user 
     * @returms {promise} user or null if not found 
     */ 
     function get() { 
      var q = $q.defer(); 

      var request = utils.buildAuthRequest(session, 'GET', ENDPOINTS.USERS); 

      $http(request) 
       .success(function (users) { 
        q.resolve(users.result); 
       }) 
       .error(function (error) { 
        logger.error('UserService.get > Error ', error); 

      return q.promise; 
     } 
    } 
})(); 

//------------------------------------------------------------------------------------ 
# user.module.js 
# 'app.foo.user' refers to your directory structure i.e. app/foo/user/user.module.js 

(function() { 
    'use strict'; 

    angular 
     .module('app.foo.user', [ 
     ]); 
})(); 

//------------------------------------------------------------------------------------ 
# user-list.controller.js 
# This is where you make a call to the 'get' method in the 'user.factory.js'. 
# And you gave to inject 'userSvc' in this file so as to connect to the 'user.factory.js' file. 
# 'app.foo.admin' refers to your directory structure i.e. app/foo/admin/user-list.controller.js 

(function() { 
    'use strict'; 

    angular 
     .module('app.foo.admin') 
     .controller('UsersListController', UsersListController); 

    /* @ngInject */ 

    function UsersListController(
     $scope, 
     $state, 
     $timeout, 
     $log, 
     userSvc) { 
     var vm = this; 
     vm.loading = false; 
     vm.userSvc = userSvc; 

     activate(); 

     function activate() { 
      // init users 
      vm.userSvc.get().then(
       function(users) { 
        initSearchString(users); 

        vm.users = users; 
       }, 
       function(error) { 
        $log.error(error); 
       } 
      ); 
     } 
    } 
})();