java - UI Bootstrap (AngularJS) 模式不起作用

Question

我正在做这个练习项目，但我无法让我的 UI Boostratp 模式工作。使用网站 https://github.com/angular-ui/bootstrap/tree/master/src/modal 中的示例我一直在尝试实现这个功能但没有成功。

我相信这是因为我不具备将演示代码集成到我的 MVC 风格项目中的知识(我有单独的 app.js、 Controller 和服务文件)，并且这个文件示例相当令人困惑我。

我的文件夹/文件结构:

现在，我尝试了各种方法，包括制作一个单独的 Controller ，以及模态内容的单独 View (这就是为什么我有 bookDetailes.html 和 bookDetailesConreoller.js 文件，但它们目前乱序 - 未在 app.js 中连接) stat 提供者及其代码正在注释中)。这就是我所在的地方:

A 有一个从数据库检索的基本书籍详细信息列表，并通过 data-ng-repeat 在 book.html View 中打印出来。在每次重复中，我都有一个操作按钮，应该打开模式以编辑或删除该条目。

这是我的 book.html 文件，其中嵌套了来自 UI Bootsratp 站点的演示标记代码:

<h4 class="text-center"><strong>Book Collection</strong></h4>
<br>
<table class="table table-hover">
    <thead>
        <tr>
            <th>ID</th>
            <th>Image</th>
            <th>Title</th>
            <th>Author</th>
            <th>Year</th>
            <th>Publisher</th>
            <th>City of Publishing</th>
            <th>Genre</th>
            <th>Action
            <th>
        </tr>
    </thead>
    <tbody data-ng-init="init()">
        <tr data-ng-repeat="book in books">
            <td>{{book.id}}</td>
            <td>{{book.image}}</td>
            <td>{{book.title}}</td>
            <td>{{book.author}}</td>
            <td>{{book.yearOfPublishing}}</td>
            <td>{{book.publisher}}</td>
            <td>{{book.cityOfPublishing}}</td>
            <td>{{book.genre}}</td>
            <td><a class="btn btn-default" data-toggle="modal" data-ng-click="open()">Action</a></td>
        </tr>
    </tbody>
</table>

<div>
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a ng-click="selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>{{ selected.item }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>
</div>  

如您所见，表标记后的最后一部分应该是模态标记，当按下操作按钮并通过 data-ng-click 将命令“open()”传递给 bookController.js 时，会调用该标记。

我的bookControler.js:

collectionsApp.controller('bookController', function($scope, bookService,
        $state) {

    var books = [];

    $scope.save = function() {
        bookService.save($scope.book, onSaveDelete);
    }

    $scope._delete = function(id) {
        for (book in books) {
            if (book.id === id) {
                bookService._delete(book, onSaveDelete);
            }
        }
    }

    $scope.edit = function(id) {
        for (book in books) {
            if (book.id === id) {
                $scope.book;
            }
        }
    }

    $scope.init = function() {
        bookService.list(onInit);
    }

    // <-- Beginning of the modal controller code I inserted (and adopted) from the example: 

    $scope.items = [ 'item1', 'item2', 'item3' ];

    $scope.open = function(size) {

        modalInstance = $modal.open({
            templateUrl : 'myModalContent.html',
            controller : ModalInstanceCtrl,
            size : size,
            resolve : {
                items : function() {
                    return $scope.items;
                }
            }
        });

        modalInstance.result.then(function(selectedItem) {
            $scope.selected = selectedItem;
        }, function() {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };

    var ModalInstanceCtrl = function($scope, $modalInstance, items) {

        $scope.items = items;
        $scope.selected = {
            item : $scope.items[0]
        };

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

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

    // <-- Ending of the modal code I have inserted from the example.

    onSaveDelete = function(response) {
        if (response.data.status === 'success') {
            $scope.init();
        } else {
            alert("DEBUG ALERT: SAVE/DELETE FAIL");
        }
    };

    onInit = function(response) {
        $scope.books = response.data;
        books = response.data;
    };

});

现在，像这样，代码正在 data-ng-repeat 正在工作的降神会中工作，并且我在页面加载时获得数据库条目列表。但是当我单击“操作”按钮时，我在控制台中收到此错误消息:

但是当我将 $modal 添加到可能的代码时，如下所示:

collectionsApp.controller('bookController', function($scope, bookService,
        $state, $modal) {

    var books = [];
...

我在页面加载时收到此错误:

有人可以帮助我理解并在我的项目中实现模式吗？预先感谢...;)

Answer 1

添加这个，

angular.module('Urapp', ['ui.bootstrap']);