在 angular js 中重用单个模态显示多个模块的动态内容

Question

我希望创建一个有状态的应用程序，该应用程序对多个模块使用通用模式。单击菜单中的项目时，模态 window 应该打开，然后我希望根据按下的按钮用动态数据填充模态。

因此，例如，如果我单击 'Users'，我希望弹出模式，然后使用 angular，我想用所有用户填充模式

我一直在尝试，但还没有成功。

这是我的正文 html:

<body ng-app="myApp">
    <div class="collapse navbar-collapse navbar-center" id="js-navbar-collapse">

        <ul class="nav navbar-nav">

            <li class="active">
                <a href="#/users"  data-toggle="modal" data-target="#Modal">
                    <div class="users_icon">&nbsp;</div>
                    <br>
                    <p>Users</p>
                </a>
            </li>
            <li>
                <a ng-href="#/settings"  data-toggle="modal" data-target="#Modal">
                    <div class="settings_icon">&nbsp;</div>
                    <br>
                    <p>Settings</p>
                </a>
            </li>
        </ul>
    </div>

    <div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel">
        <div class="modal-dialog" role="document">
            <form class="form-horizontal" role="form">

                <div class="modal-content"  ui-view="modal" autoscroll="false">

                </div>
            </form>
        </div>
    </div>
</body>

到目前为止我的 js：

'use strict';

angular
.module('myApp', [
    'ui.router',
    'js-data'
])

.config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/calendar');

    $stateProvider
        .state("Modal", {
            views:{
                "modal": {
                    templateUrl: "views/modal.html"
                }
            },
            abstract: true
        })
        .state("Modal.addtask", {
            views:{
                "modal": {
                    templateUrl: "views/modals/addtask.html"
                }
            }
        });

})

我希望能够单击菜单中的项目，使用正常的 bootstrap javascript 打开模态对话框，然后由 angular 填充模态具有与单击的菜单项相关的动态数据。我不能使用 angular ui 因为我正在使用 SCSS 进行样式设置并且它只支持 LESS。任何帮助将不胜感激。

此时，模态框弹出，但我无法获取要填充到模态框的数据

Answer 1

我设法通过使用此处所述的粘性状态来做到这一点：http://christopherthielen.github.io/ui-router-extras/#/sticky

在 angular js 中重用单个模态显示多个模块的动态内容

Reusing a single modal to display dynamic content for a number of modules in angular js

modal-dialog

angularjs

bootstrap-modal

twitter-bootstrap-3