AngularJS：如何在視圖上方打開模態作為對散列更改的響應（ngView / $ routeProvider）

Question

我在我即將成為令人敬畏的（第一個）角應用程序中使用$ routeProvider作為我的路線。

然而，從骨干來看，我似乎無法弄清楚如何打開模態作為對哈希變化的響應。

IE：

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

將使用項目的模型打開Boostrap詳細信息模式（模板+控制器）。

可以使用$ routeProvider方法完成此操作：

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

救命？

Answer 1

您可能對AngularJS的工作方式感到有些困惑 - 這是完全正常的，特別是如果您習慣使用jQuery進行DOM操作。

AngularJS沒有任何開箱即用的功能來啟動模態窗口，我可以看到你正在使用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="bootstrap@3.0.0" data-semver="3.0.0" rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" />

  <script data-require="jquery@2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script data-require="bootstrap@3.0.0" 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>

希望有所幫助！

AngularJS：如何在視圖上方打開模態作為對散列更改的響應（ngView / $ routeProvider）

問題描述

1 個解決方案

解決方案1
3 2013-09-07 18:55:11

AngularJS：如何在視圖上方打開模態作為對散列更改的響應（ngView / $ routeProvider）

問題描述

1 個解決方案

解決方案1 3 2013-09-07 18:55:11

解決方案1
3 2013-09-07 18:55:11