UI Bootstrap（AngularJS）模式不起作用

Question

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

我认为这是因为我没有将演示代码集成到我的MVC样式项目（我有单独的app.js，控制器和服务文件）的知识，而这个文件示例相当令人困惑我

我的文件夹/文件结构：

现在，我尝试了各种各样的东西，包括制作一个单独的控制器，以及模态内容的单独视图（这就是为什么我有bookDetailes.html和bookDetailesConreoller.js文件，但它们目前无序 - 在app.js中没有连接统计提供者及其代码正在评论中）。这就是我所在的地方：

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

这是我的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>  

正如你所看到的，表格标签之后的最后一部分应该是模态标记taht在按下Action按钮时调用，命令“open（）”我通过data-ng-click传递给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正在运行，并且我在页面加载时得到数据库条目列表。但是，当我单击Action按钮时，我在控制台中收到此错误消息：

但是当我将$ modal添加到这样的代码中时：

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

    var books = [];
...

我在页面加载时遇到此错误：

有人可以帮我理解并实现我项目的模态吗？在此先感谢...;）

Answer 1

添加此内容，

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