不明なプロバイダ：$ modalInstanceProvider < - $ modalInstance < - MainController

Question

私は$ modalInstanceを使用して呼び出しようとしているモーダルのアプリケーションを持っています。私がここで読んだ他の質問によると、ng-controllerをテンプレートに含めてはいけません。それはまさに私がやったことですが、まだ動作していません。

ここに私のコードです：

HTML - メインページ

<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script> 

HTML - add.htmlテンプレート

<div ng-show="showAddModal"> 

    <div class="product-header"> 
     <div class="modal-title">Add Product Information</div> 
     <div class="modal-close" ng-click="closeModal();">X</div> 
    </div> 

    <!-- other codes go here --> 
</div> 

AngularJS -

0123をapp.js

var app = angular.module('ProductApp', ['ngResource', 'ui.bootstrap']); 

AngularJS - コントローラ

app.controller('MainController', ['$scope', '$resource', '$http', 'ProductFactory', 'EditProductFactory', '$modalInstance', 
           function ($scope, $resource, $http, ProductFactory, EditProductFactory, $modalInstance) { 

$scope.addProduct = function() { 

    $scope.showAddModal = true; 

    var modalOptions = { 
     template: '/views/add.html', 
     controller: 'AddController' 
     //scope: $scope 
    }; 

    $modal.open(modalOptions); 
} 

... 

任意のヒントを大幅に理解されるであろう。

ありがとうございます。

Answer 1

$modalInstanceの代わりに$uibModalを注入する必要があります。 $uibModal.open(...)を使用してください。あなたのAddControllerあなたが$uibModalInstance

angular.module('ProductApp').controller('AddController', function ($scope, $uibModalInstance) { 
    $scope.close = function() { 
    $uibModalInstance.close(); 
    }; 
});