Question

我正在使用服务使用'use strict'; var mission_vision_mod = angular.module('myApp.mission_vision', ['ngRoute']); mission_vision_mod.config(['$routeProvider', function($routeProvider) { $routeProvider.when('/mission_vision', { templateUrl: 'partials/mission_vision/mission_vision.html', controller: 'mission_visionCtrl' }); }]); mission_vision_mod.controller('mission_visionCtrl', ['$scope','getMissionData','$http', function($scope, $http, getMissionData) { $scope.visiontext = "Here is the content of vision"; getMissionData.getmissiondata(); $scope.missions = getMissionData.missiondata; $scope.len = $scope.missions.length; }]); mission_vision_mod.service('getMissionData', ['$rootScope','$http', function($rootScope, $http){ var missiondata; function getmissiondata(){ $http.get('m_id.json').success(function(data){ missiondata = data; }); } }]);方法从服务器获取数据。我在服务中调用函数，然后从控制器访问其变量。但这不是这样的。代码在

之下

$http.get()

当我在控制器本身中编写var WeatherApp = angular.module("WeatherApp", ["ngRoute", "ngResource"]). config(function ($routeProvider) { $routeProvider. when('/', { controller: ListCtrl, templateUrl: 'list.html' }). otherwise({ redirectTo: '/' }); }); WeatherApp.factory('City', function ($resource) { return $resource('/api/City/:id', { id: '@id' }, {update: { method: 'PUT'}}); }); var ListCtrl = function ($scope, $location, City, $http) { $scope.city = City.query(); $scope.units = 'metric'; $scope.appId = ''; $scope.displayNum = 10; $scope.display = []; $scope.temp = []; $scope.generateList = function () { $scope.exp = City.query(function (exp) { shuffle(exp); $scope.cityIdAr = []; for (var i = 0; i < $scope.displayNum; ++i) { $scope.display.push($scope.exp[i]); $scope.cityIdAr.push($scope.exp[i].CityId); }; $scope.cityId = $scope.cityIdAr.join(); $scope.getWeather(); for (var i = 0; i < $scope.displayNum; ++i) { $scope.temp.push($scope.list[i].main.temp); }; }); }; function shuffle(ob) { for (var j, x, i = ob.length; i; j = Math.floor(Math.random() * i), x = ob[--i], ob[i] = ob[j], ob[j] = x); return ob; }; $scope.getWeather = function () { var url = 'http://api.openweathermap.org/data/2.5/group'; $http.jsonp(url, { params: { id: $scope.cityId, APPID: $scope.appId, units: $scope.units, callback : 'JSON_CALLBACK' } }).success(function (data, status, headers, config) { $scope.data = data; $scope.list = data.list; }); }; $scope.generateList(); };函数时，它可以工作。我是角度JS的新手。

Answer 1

        ['$scope','getMissionData','$http', 
function($scope,   $http,           getMissionData

服务名称与变量名称不匹配。

我的建议：停止使用此数组表示法。它使代码混乱，并且是错误的常见来源。使用ng-annotate。

也就是说，您的服务未正确定义。它没有任何允许它被调用的成员函数。重新阅读服务文档。使用factory（）定义服务比使用service（），BTW定义服务更容易。该服务应返回 $ http返回的承诺。尝试在进行异步调用后立即访问异步调用返回的值将永远不会起作用。阅读http://blog.ninja-squad.com/2015/05/28/angularjs-promises/

Answer 2

尝试像这样编写您的服务

mission_vision_mod.service('getMissionData', ['$rootScope','$http', function($rootScope, $http){
    this.getMissionData=function(){
        return $http.get('m_id.json');
    }
}]);

在控制器中使用Service，如下所示：

mission_vision_mod.controller('mission_visionCtrl', ['$scope','getMissionData','$http', function($scope,getMissionData,$http) {
    $scope.visiontext = "Here is the content of vision";
    getMissionData.getMissionData().success(function(response){
       $scope.missions=response;
       $scope.len = $scope.missions.length;
     }).error(function(errorl){
       //handle error here
     });

}]);

另外，我建议使用更好的服务名称 - ＆＃39; MissionDataService＆＃39; ：）

编辑 - 您的注入服务序列应该匹配数组中指定的注射名称序列。查看我的上一次编辑

Answer 3

尝试：

    mission_vision_mod.service('getMissionData', ['$rootScope','$http', function($rootScope, $http){
            var missiondata;
            function getmissiondata(){
                $http.get('m_id.json').success(function(data){
                missiondata = data;
                return missiondata;
            });
            }

}]);

Angular JS - 服务无法正常工作

3 个答案: