angularjs - 在不同的部分页面中使用具有相同控制器的服务从 json 页面获取数据

Question

我正在尝试使用同一控制器中的服务获取不同的 json 页面数据。这是示例代码

app.js 文件

var app = angular.module('drinks-app', ['ui.bootstrap']);

//设置应用程序

app.config([ '$routeProvider', function( $routeProvider ) {

// 路线

$routeProvider.when('/', {
   templateUrl: 'drinks_list.html',
   controller: 'MainCtrl'
}).when('/:drinkid', {
   templateUrl: 'drink_editor.html',
   controller: 'MainCtrl'
}).otherwise({
   redirectTo: '/drinks', 
   templateUrl: 'drinks_list.html',
   controller: 'MainCtrl'
});

// 控制器

app.controller('MainCtrl', function( $scope, $location, $routeParams, Drink) {
   Drink.getDrinks().success(function(drink) {       
        $scope.data = drink   
   });
});

//工厂

app.factory('Drink', function($http) {
    var Drink = function(data) { angular.extend(this, data);    
        this.getData = function() {
             return $http.get('drink.json').then(function(response){
                    return response.data; 
             });
         }      
     }
})