通过服务调用$http，然后将数据拖到控制器(AngularJS)中

Question

编辑

问题:希望通过一个userdata.json服务调用(数组)，然后在my Controller中调用该服务，这样视图就可以调用数据。

目前的情况如下：

应用程序：

angular.module('UsersApp', []);

服务：

angular.module('UsersApp').factory('UserService', function($http) {
    this.getUserData = function() {
        return $http.get('userdata.json');
    }
})

主计长：

angular.module('UsersApp').controller('UserController', [
        'UserService', // dependency on service
        '$mdSidenav', 
        '$mdBottomSheet', 
        '$log',
        '$timeout',
        UserController // calling a function (defined below)
        ]);


// Declare controller as a function, then attach properties using 'this'.
//-------------------------------------------------------------------------

function UserController( UserService, $mdSidenav, $mdBottomSheet, $log, $timeout ) {

        var self = this;

        self.selected     = null;
        self.users        = [];
        self.selectUser   = selectUser;
        self.toggleList   = toggleUsersList;
        self.makeContact  = makeContact;


// Fetch user data from UserService.js
//-------------------------------------------------------------------------


function(UserService) {

    var data = UserService.getData();

   };


// Internal methods
//-------------------------------------------------------------------------

    // Hide or Show the 'left' sideNav area

    function toggleUsersList() {
      $mdSidenav('left').toggle();
    }


    // Select the current avatars
    // @param menuId

    function selectUser ( user ) {
      self.selected = angular.isNumber(user) ? $scope.users[user] : user;
    }



// Show the bottom sheet
//------------------------------------------------------------------------------

    function makeContact(selectedUser) {

        $mdBottomSheet.show({

            controller     : [ '$mdBottomSheet', ContactSheetController],
            controllerAs : "vm",
            templateUrl    : './partials/contactSheet.html',
            parent         : angular.element(document.getElementById('content'))

            })

            .then(function(clickedItem) {
                $log.debug( clickedItem + ' clicked!');
            });


        // User ContactSheet controller
        //---------------------------------------------------------------------

        function ContactSheetController( $mdBottomSheet ) {

            this.user = selectedUser;

            this.items = [
                { name: 'Phone'       , icon: 'phone'       , icon_url: 'svg/phone.svg'},
                { name: 'Twitter'     , icon: 'twitter'     , icon_url: 'svg/twitter.svg'},
                { name: 'Google+'     , icon: 'google_plus' , icon_url: 'svg/google_plus.svg'},
                { name: 'Hangout'     , icon: 'hangouts'    , icon_url: 'svg/hangouts.svg'}
            ];

            this.contactUser = function(action) {
                // Fill in contact process here...
                // then finish up with...
                $mdBottomSheet.hide(action);
            };
        }
    }

  }

JSON数据(数组)：

[
      {
        'name': 'Lia Lugo',
        'avatar': 'svg-1',
        'content': 'I love cheese, especially airedale queso. Cheese and biscuits halloumi cauliflower cheese cottage cheese swiss boursin fondue caerphilly. Cow port-salut camembert de normandie macaroni cheese feta who moved my cheese babybel boursin. Red leicester roquefort boursin squirty cheese jarlsberg blue castello caerphilly chalk and cheese. Lancashire.'
      },
      {
        'name': 'George Duke',
        'avatar': 'svg-2',
        'content': 'Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris.'
      },
      {
        'name': 'Gener Delosreyes',
        'avatar': 'svg-3',
        'content': "Raw denim pour-over readymade Etsy Pitchfork. Four dollar toast pickled locavore bitters McSweeney's blog. Try-hard art party Shoreditch selfies. Odd Future butcher VHS, disrupt pop-up Thundercats chillwave vinyl jean shorts taxidermy master cleanse letterpress Wes Anderson mustache Helvetica. Schlitz bicycle rights chillwave irony lumberhungry Kickstarter next level sriracha typewriter Intelligentsia, migas kogi heirloom tousled. Disrupt 3 wolf moon lomo four loko. Pug mlkshk fanny pack literally hoodie bespoke, put a bird on it Marfa messenger bag kogi VHS."
      }
];

不起作用。如果有人能找出出了什么问题，就会感激--已经试过并尝试过，但却找不出答案。

Answer 1

angular.module('app').service('UserService', function($http) {
    this.getUserData = function() {
        return $http.get('userdata.json')
    }
})


angular.module('app').controller('MyController', function(UserService) {
    var self=this;
    UserService.getUserData().then(function(data) {
         self.userdata = data;
         console.log(self.userdata);
    }).catch(function(errorResponse) {
         console.log('oopsie', errorResponse);
    });
}

如果您使用控制器作为语法，这很好，如果不使用$scope.userdata = data

Answer 2

您需要在服务中返回您承诺的数据，不要将其分配给范围。

然后，在控制器中，您只需调用您的服务函数，并将其结果分配给控制器中的一个作用域变量。

Answer 3

您可以首先在其中使用依赖项注入添加服务来创建控制器，如

angular.module("app").controller('controller_App',['userService',function(userService)
   {
  var data=  userService.getData();


   }]);

在服务中，您可以像这样使用$http依赖项

    angular.module("app").service("userService",['$http',function($http){


    $http({url:'https://www.any_link.com'}).then(function(successResponse){

    return successResponse;       

    },function(errorResponse){

     return errorResponse    
   });




    }

    }]);