4

私はすぐにすばらしい (最初の) Angular アプリのルートに $routeProvider を使用しています。

ただし、バックボーンから来ると、ハッシュ変更への応答としてモーダルを開く方法がわかりません。

いいえ:

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

アイテムのモデルで Boostrap 詳細モーダル (テンプレート + コントローラー) を開きます。

これは $routeProvider アプローチで実現できますか:

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

ヘルプ？

4

1 に答える 1

4

AngularJS がどのように機能するかについて少し混乱するかもしれませんが、特に DOM 操作のために jQuery を使用することに慣れている場合は、これはまったく正常なことです。

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…&lt;/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-07T18:55:11.643 に答える