javascript - 未知提供商 : $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 - Controller

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

您需要在调用 Controller 中注入(inject) $uibModal 而不是 $modalInstance 。并使用 $uibModal.open(...)。

在您的 AddController 中，您可以注入(inject) $uibModalInstance

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