メインのアプリケーションコントローラにサービスをロード/挿入する方法は？

Question

私はthis answerからモーダルを実装しようとしていますが、私はアプリケーションコントローラでこのサービスを使用できません。質問は簡単です：emaAppメインコントローラでmodalServiceを注入するにはどうしたらいいですか？

modal.js

angular.module('emaApp', []).service('modalService', [ '$modal', 
// NB: For Angular-bootstrap 0.14.0 or later, use $uibModal above instead of $modal 
function($modal) { 

    var modalDefaults = { 
     backdrop : true, 
     keyboard : true, 
     modalFade : true, 
     templateUrl : '/app/partials/modal.html' 
    }; 

    var modalOptions = { 
     closeButtonText : 'Close', 
     actionButtonText : 'OK', 
     headerText : 'Proceed?', 
     bodyText : 'Perform this action?' 
    }; 

    this.showModal = function(customModalDefaults, customModalOptions) { 
     if (!customModalDefaults) 
      customModalDefaults = {}; 
     customModalDefaults.backdrop = 'static'; 
     return this.show(customModalDefaults, customModalOptions); 
    }; 

    this.show = function(customModalDefaults, customModalOptions) { 

     //Create temp objects to work with since we're in a singleton service 
     var tempModalDefaults = {}; 
     var tempModalOptions = {}; 

     //Map angular-ui modal custom defaults to modal defaults defined in service 
     angular.extend(tempModalDefaults, modalDefaults, customModalDefaults); 

     //Map modal.html $scope custom properties to defaults defined in service 
     angular.extend(tempModalOptions, modalOptions, customModalOptions); 

     if (!tempModalDefaults.controller) { 
      tempModalDefaults.controller = function($scope, $modalInstance) { 
       $scope.modalOptions = tempModalOptions; 
       $scope.modalOptions.ok = function(result) { 
        $modalInstance.close(result); 
       }; 
       $scope.modalOptions.close = function(result) { 
        $modalInstance.dismiss('cancel'); 
       }; 
      }; 
     } 

     return $modal.open(tempModalDefaults).result; 
    }; 

} ]); 

index.js

var app = angular.module('emaApp', []); 

app.controller('mainCtrl',['$scope', '$http', 'modalService', function($scope, $http, modalService) { 

    $scope.deleteModel = function(modelId) { 

     var modalOptions = { 
      closeButtonText : 'Cancel', 
      actionButtonText : 'Delete Customer', 
      headerText : 'Delete ' + modelId + '?', 
      bodyText : 'Are you sure you want to delete this model?' 
     }; 

     modalModule.showModal({}, modalOptions).then(function(result) { 
      //your-custom-logic 
      alert("muaha") 
     }); 
    } 

}]); 

Answer 1

あなたはモジュールにemaApp複数回定義されています。既存のモジュールを上書きするため、あなたはあなたがすでに注入された通知が[]

var app = angular.module('emaApp'); 

代わりの

var app = angular.module('emaApp', []); 

Answer 2

を削除し、後ですなわちindex.jsロードされているファイル内のモジュールを取得する必要がありますサービスを使用してください。あなたのコントローラーには、modalModuleの-possibly-undefinedの代わりにmodalServiceを使用する必要があります。