Angularjs依賴注入的解析

Question

我想在MyCtrl1中使用適當的依賴注入來注入MyCtrl1.resolve對象的字段。我試過很多不同的組合，試圖注入@MyCtrl1.resolve等，但沒有運氣。

@MyCtrl1 = ($scope, $http, batman, title) -> 
    $scope.batman = batman.data 
    $scope.title = title.data 

@MyCtrl1.resolve = { 
batman: ($http) -> 
    $http.get('batman.json') 
title: ($http) -> 
    $http.get('title.json') 
} 
#@MyCtrl1.$inject = ['$scope', '$http'] -- commented out because not sure how to inject resolve fields 

angular 
.module('app', []) 
.config(['$routeProvider', '$locationProvider', ($routeProvider, $locationProvider)-> 
    $locationProvider.html5Mode(true) 

    $routeProvider.when('/', {templateUrl: 'index.html', controller: MyCtrl1, resolve: MyCtrl1.resolve}) 
    $routeProvider.otherwise({redirectTo: '/'}) 
]) 

angular.bootstrap(document,['app']) 

Answer 1

解決方法是路由而不是控制器的屬性。控制器將被注入在路由級別上定義的依賴項，不需要在控制器上指定解析屬性。

以你的例子之一（轉換爲JavaScript），您將定義控制器一如既往，那就是：

MyCtrl1 = function($scope, $http, batman, title) { 
    $scope.batman = batman.data; 
    $scope.title = title.data; 
} 

，然後路線上的resolve屬性：

angular.module('app', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { 
    $locationProvider.html5Mode(true) 

    $routeProvider.when('/',{templateUrl: 'index.html', controller: MyCtrl1, resolve: { 
    batman: ['$http', function($http) { 
     return $http.get(..).then(function(response){ 
     return response.data; 
     }); 
    }], 
    title: ['$http', function($http) { 
     return //as above 
    }] 
    }}); 
    $routeProvider.otherwise({redirectTo: '/'}); 
}]); 

如果你想使用路由的解析部分來縮小代碼，你需要使用數組樣式的註釋 - 我已經在上面的例子中包含了這個。