Asp.net mvc 使用最新版本的库时，UI.bootstrap.modal不会打开

我正试图在ASP.NET MVC 5 Visual Studio 2013下使用最新的nuget库实现这一点。 AngularJS核心1.3.8 AngularJS UI引导程序0.12.0 引导3.3.1 jQuery 2.1.3

重要文件： App.js

DeviceController.js

deviceModule.controller("DevicesController", function ($scope, deviceService, $modal) {
    $scope.devices = [];

    function init() {
        $scope.devices = deviceService.getDevices();
    }

    init();

    $scope.addDevice = function(size) {
        var modalInstance = $modal.open({
            templateUrl: "newDeviceTemplate.html",
            controller: "NewDeviceModelController",
            size: size
        });

        modalInstance.opened.then(function() {
            alert('yep');
        });
        modalInstance.result.then(function (newDevice) {
            deviceService.postDevice(newDevice);
        }, function () {

        });

    }
});

deviceModule.controller("NewDeviceModelController", function ($scope, $modalInstance) {
    $scope.ok = function () {
        $modalInstance.close({ name: newDevice.name });
    };

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

});

newDeviceTemplate.html

<div class="modal-header">
    <h2>New Device</h2>
</div>
<div class="modal-body">
    <input type="text" data-ng-model="newDevice.name" />
</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>

Index.cshtml

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div data-ng-app="dxuWebApp" data-ng-controller="DevicesController">


    <div class="row">
        <div class="col-lg-12">
            <h2>Devices <a data-ng-click="addDevice()"><span class="glyphicon glyphicon-plus-sign"></span></a></h2>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <ul class="list-inline">
                <li data-ng-repeat="device in devices | orderBy: 'name'">
                    <a href="#">
                        <div class="device">
                            <div class="deviceImage">
                                @*<img alt="device image"/>*@
                                <span class="glyphicon glyphicon-phone"></span>

                            </div>
                            <div class="deviceName">
                                {{device.name | uppercase}}
                            </div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

@section scripts
{
    @Scripts.Render("~/bundles/dxuWebApp")
    <script type="text/ng-template" id="newDevice.html">        
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>New Device</h2>
                </div>
                <div class="modal-body">
                    <input type="text" data-ng-model="newDevice.name" />
                </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>
            </div>
        </div>
    </script>
}

对ui引导和ui-bootstrap.tpls的引用都在_布局页面中

我希望当我点击时

<a data-ng-click="addDevice()"><span class="glyphicon glyphicon-plus-sign">

AngularJs魔术会发生，我会在屏幕上得到一个模态，但什么都没有发生，没有错误或类似的事情。 我确实在deviceController.addDevice上设置了一个断点，它到达该点并通过，屏幕上没有显示任何内容

---

那么我的代码有什么问题吗？

我也有同样的问题

我正在使用MVC5.0和AngularJS，所以它不起作用的原因是404找不到modal.html。我没有在控制器中为modal.html创建路由，也没有将视图映射到与路由同名的控制器

在正确设置控制器和视图后，它开始工作

---

很抱歉，没有相关代码，因为这只是MVC过程中的一个问题

这个newDeviceTemplate.html是在哪里定义的？我尝试了两种不同的方法，我在脚本标签上使用了newDevice.html，还有一个单独的文件，它与jscript位于同一文件夹中，理想情况下，我希望它位于views文件夹中

<a data-ng-click="addDevice()"><span class="glyphicon glyphicon-plus-sign">