未知提供者：$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();
  };
});

未知提供者：$modalInstanceProvider <- $modalInstance <- MainController

Unknown provider: $modalInstanceProvider <- $modalInstance <- MainController

javascript

angularjs

angular-ui