AngularJS: как открыть modal над представлением в качестве ответа на изменение хэша (ngView/$ routeProvider)

Я использую $ routeProvider для своих маршрутов в своем скоро появляющемся ужасном (первом) угловом приложении.

Однако, исходя из основы, я не могу понять, как открыть модальный ответ на изменение хэша.

IE:

http://localhost:3000/#/items/1

откроет Boostrap детали модальный (шаблон + контроллер) с моделью элемента.

Может ли это быть достигнуто с подходом $ routeProvider:

.when('/items/1', { 
    templateUrl: 'views/ItemDetails.html', 
    controller: 'ItemDetailsCtrl' 
    }) 
...

Помощь?

источник

2013-09-07 Guy

Возможно, вы немного смущены тем, как работает AngularJS - и это абсолютно нормально, особенно если вы играете с jQuery для манипуляций с DOM.

Угловой JS не поставляется с какой-либо функцией из коробки, чтобы запустить модальное окно, и я вижу, что вы используете Bootstrap для этого.

Я бы посоветовал снова взглянуть на официальную документацию AngularJS (http://docs.angularjs.org/) и проверить первые примеры на главной странице, чтобы обойти ее. Также обязательно посетите Egghead.io (http://egghead.io/) - действительно хорошие видеоролики.

Но, чтобы дать вам некоторую помощь, я привел пример, используя Bootstrap и AngularJS, чтобы запустить модальное окно по вашему желанию.

Вы можете увидеть здесь работать (http://plnkr.co/edit/fCaNjLwi4RlCw66yKRd7)

В основном $routeprovider «точки» приложение для правого ракурса и контроллера, которые будут использоваться для конкретного маршрута. Таким образом, все, что вы хотите загрузить (в этом случае модальное окно) должно быть частью представления.

Взгляните на приведенный ниже код:

<!doctype html> 
<html lang="en" ng-app="myApp"> 
<head> 
    <meta charset="UTF-8"> 
    <title>ItemDetailsCtrl</title> 

    <link data-require="[email protected]" data-semver="3.0.0" rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" /> 

    <script data-require="[email protected]" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
    <script data-require="[email protected]" data-semver="3.0.0" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> 

    <script> 

    'use strict'; 

    var myApp = angular.module('myApp', []).config(function($routeProvider){ 

     $routeProvider.when('/', 
     { 
      templateUrl: 'views/template.html', 
      controller: 'ItemDetailsCtrl' 
     }); 
    }); 

    myApp.controller('ItemDetailsCtrl', function(){ 

    }); 

    </script> 

    <script type="text/ng-template" id="views/template.html"> 

    <!-- Button to trigger modal --> 
    <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> 

    <!-- Modal --> 
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body"> 
     <p>One fine body…</p> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
     <button class="btn btn-primary">Save changes</button> 
    </div> 
    </div> 

    </script> 

</head> 

<body ng-controller="ItemDetailsCtrl"> 

    <div ng-view></div> 

</body> 
</html>

Надежда, что помогает!

источник

2013-09-07 18:55:11

этот сайт с яйцами является удивительным! Благодарю. Я отредактировал ваш plunkr http://plnkr.co/edit/Rk4QqSnihcZMp5lsTVpv?p=preview - тогда я хочу, чтобы модальность была выше главной страницы ... Как вы можете видеть, она просто пробегает по ней ... Может быть, я не может совершить то, что с ngView ... – Guy

Hummm ... Я вижу, если я это правильно понимаю, в основном вы хотите остаться на домашней странице и просто принести модальное окно с дополнительной информацией о конкретном заказе - например, заказать номер 1/заказы/1, правильно ?! Есть несколько способов добиться этого. Например, вы можете использовать ngResource (http://docs.angularjs.org/api/ngResource.$resource) для взаимодействия с вашими источниками данных на сервере RESTful и заполнением модального окна. –

Да. в точку. Я в основном хочу выставить модальный и изменить хеш, но не меняя вид ... – Guy

AngularJS: как открыть modal над представлением в качестве ответа на изменение хэша (ngView/$ routeProvider)

ответ

Смежные вопросы