Неизвестный поставщик: $ 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 - 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

Вам необходимо ввести $uibModal вместо $modalInstance в ваш вызывающий контроллер. И используйте $uibModal.open(...).

В вашей AddController вы можете придать $uibModalInstance

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