Question

我已经下载了一些角度UI指令，因为我不需要它们。我已经从http://angular-ui.github.io/bootstrap/下载了最新的模态文件，并使用此代码

App.controller('PagesController', ['$scope', '$modal', 'PageFactory', function ($scope, $modal, PageFactory) {

    $scope.pages = [];

    PageFactory.getPages().then(function (pages) {
        $scope.pages = pages;
    }, function (err) {
        console.log(err.message);
    });

    $scope.deletePage = function (page) {
        var modalInstance = $modal.open({
            templateUrl: 'pages-delete-modal.html',
            controller: ['$scope', '$modalInstance', function ($scope, $modalInstance) {
                $scope.ok = function () {
                    $modalInstance.close();
                };

                $scope.cancel = function () {
                    $modalInstance.dismiss('cancel');
                };
            }]
        });

        modalInstance.result.then(function () {
            // ok selected

        }, function () {

        });
    };

}]);

这是模板

<script type="text/ng-template" id="pages-delete-modal.html">
    <div class="modal-header">
        <h3 class="modal-title">Delete Confirmation</h3>
    </div>
    <div class="modal-body">
        Are you sure you want to delete this page?
    </div>
    <div class="modal-footer">
        <button class="btn btn-danger" ng-click="ok()">Delete</button>
        <button class="btn btn-default" ng-click="cancel()">Cancel</button>
    </div>
</script>

现在我似乎得到一个错误说

http://errors.angularjs.org/1.2.23/$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal

我已经有了＃ui.bootstrap＆＃39;注入我的app.js文件，你可以看到

var App = angular.module('MyApp', ['ui.router', 'ui.bootstrap']);

但是，如果我使用此链接，而不是使用下载的模态文件，它可以工作吗？

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

我还下载了转换指令，因为我认为模态指令依赖于此，但我看不出我错过了其他任何内容。

我正在使用tpl.min.js文件进行转换和模态。

任何帮助非常感谢

Answer 1

您应该尝试将modalInstance控制器更改为具有项目中实际控制器名称的字符串。

$scope.deletePage = function (page) {
    var modalInstance = $modal.open({
        templateUrl: 'pages-delete-modal.html',
        controller: 'otherCtrl'
    });

    modalInstance.result.then(function () {
        // ok selected

    }, function () {

    });
};

然后创建控制器本身

App.controller('otherCtrl',['$scope','$modalInstance', function($scope,$modalInstance){

    $scope.ok = function () {
       $modalInstance.close();
    };

    $scope.cancel = function () {
       $modalInstance.dismiss('cancel');
    };
}]);

Angular UI $模态错误

1 个答案: