Question

我正在尝试使用最新的nuget库在ASP.NET MVC 5 Visual Studio 2013下执行此操作。 AngularJS Core 1.3.8 AngularJS UI Bootstrap 0.12.0 Bootstrap 3.3.1 jQuery 2.1.3

重要文件： App.js

var deviceModule = angular.module("devicesModule", ["ui.bootstrap"]);
var app = angular.module("dxuWebApp", ["devicesModule"]);

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-bootstrap和ui-bootstrap.tpls的引用都在_layout页面中。

我希望当我点击

时

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

AngularJs魔法会发生，我会在屏幕上得到一个模态，但没有任何反应，没有错误或类似的东西。我确实在deviceController.addDevice()上设置了一个断点，它触及了这一点并且通过，屏幕上没有任何内容。

我的代码出了什么问题？

Answer 1

我遇到了完全相同的问题。

我正在使用MVC 5.0和AngularJS，所以它没有工作（我得到404无法找到modal.html。）是因为我没有在控制器中创建路由modal.html或将视图映射到控制器，其名称与路径相同。

正确设置控制器和View后，它工作正常。

很抱歉没有这方面的代码，因为这只是MVC流程之后的问题。

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

1 个答案: