Повторное использование одного модального ряда для отображения динамического контента для нескольких модулей в угловых js

Question

Повторное использование одного модального ряда для отображения динамического контента для нескольких модулей в угловых js

0

Я ищу создать приложение с поддержкой состояния, которое использует общий модальный модуль для нескольких модулей. При нажатии элементов в меню, модальное окно должно открыться, а затем я надеюсь заполнить модальные динамические данные на основе нажатой кнопки.

Так, например, если я нажму "Пользователи", я бы хотел, чтобы модальный всплывал, а затем с использованием углового, я хочу заполнить модальный всеми пользователями

Я играл, но мне не удалось зайти очень далеко.

Вот тело моего 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"
                }
            }
        });

})

Я хотел бы иметь возможность щелкнуть элемент в меню, использовать нормальный загрузочный javascript, чтобы открыть модальный диалог, а затем модальный, который будет заполнен угловыми динамическими данными относительно выбранного пункта меню. Я не могу использовать угловые ui, поскольку я использую SCSS для стилизации, и он поддерживает только LESS. Любая помощь будет очень оценена.

На данный момент модальные всплывающие окна, но затем я не могу получить данные для заполнения в модальных

Michael Wilson 21 авг. 2015, в 14:38

Источник

0

Есть ли конкретный вопрос, на который вы хотели бы ответить?
SamHuckaby 21 авг. 2015, в 16:36

Теги:

angularjs

modal-dialog

bootstrap-modal

twitter-bootstrap-3

1 ответ

Ещё вопросы

Есть ли конкретный вопрос, на который вы хотели бы ответить?

Michael Wilson · Accepted Answer · 2015-08-28T10-36-00.000Z

Мне удалось это сделать, используя липкие состояния, как описано здесь: http://christopherthielen.github.io/ui-router-extras/#/sticky