AngularJS:如何在视图上方打开模态作为对哈希更改的响应(ngView /$routeProvider）

AngularJS: how to open a modal above a view as a response to a hash change (ngView /$routeProvider)

本文关键字：响应 哈希更 ngView routeProvider 视图 模态 方打开 AngularJS      更新时间：2023-09-26

我正在我即将成为很棒的（第一个）角度应用程序中使用$routeProvider作为我的路线。

但是，从骨干来看，我似乎无法弄清楚如何打开模态作为对哈希更改的响应。

即：

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

将打开带有项目模型的 Boostrap 详细信息模式（模板 + 控制器）。

这可以通过$routeProvider方法实现吗：

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

帮助？

你可能对

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>

希望对您有所帮助！

相关文章：