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＆lt; - $ modalInstance＆lt; - MainController

1 个答案: