javascript - Bootstrap 模态不会在路由页面内打开

Question

我正在通过 ui.router 为我的应用程序使用 angularjs 和单页应用程序方法。现在我只想在单击按钮（在该路线之一内）时显示一个模式。

我使用了一个在简单页面中工作的基本模式，但在我的情况下不起作用（可能是因为路由）。我读到有几种方法可以做到这一点，即使是利用 ui.router 和嵌套状态，但我没有得到它，谁能给我一个简单的工作示例来做到这一点？

这是我的模块应用程序

var app = angular.module('myApp', ["ui.router",'ngTagsInput']);

// define route configurations inside app.config
// injecting dependencies
app.config(function ($stateProvider, $locationProvider,
                     $urlRouterProvider) {


    $stateProvider
        .state('Home', {
            url: "/Home",
            templateUrl: "views/home.html",
            controller: "HomeCtrl"

        })
        .state('Profilo', {
            url: "/Profilo",
            templateUrl: "views/profilo.html",
            controller: "ProfileCtrl"
        })
        .state('Altro', {
            url: "/Altro",
            templateUrl: "views/altro.html",
            controller: "AltroCtrl"

        })
});

这是我在配置文件控制器处理的视图中打开的简单模式

<button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModal">button</button>

<div class="modal fade" id=myModal" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close
                </button>
            </div>
        </div>

    </div>
</div>

提前致谢

标签： javascriptangularjstwitter-bootstrapmodal-dialog