角度 - モーダルでビューを開く

Question

anglejsを使ってビューを表示するようにログインページを構築しました。これは完全に機能しています。今は同じスクリーンを開きたいが、モーダルを使用したい。他の画面にリダイレクトされずに任意のページからそのモーダルを開くため。それは可能ですか？そのビュー/コントローラでコードを再利用することはできますか？それとも、私は別の画面を作成する必要がありますか？ モーダル用の新しいスクリーンを作成する必要がある場合は、それを正しい方向に向けることができますか？

Answer 1

あなたはあなたのビューとコントローラとのブートストラップmodalを使用することができます。

myApp.controller('MainController', function($scope, $uibModal) { 
    $scope.openModal = function() { 
    $uibModal.open({ 
     templateUrl: 'login.html', 
     controller: 'LoginController' 
     }); 
    }; 
}); 

それはあなたがラップのテンプレートを使用して、それにlogin.htmlを含むことができ、よりよい見えるようにする：

<div class="modal-header"> 
    <h3 class="modal-title">I'm a modal login!</h3> 
</div> 
<div class="modal-body" ng-include="'login.html'"></div> 
<div class="modal-footer"> 
    I'm a footer 
</div> 

使用するにはブートストラップモーダル - index.htmlに次を含める必要があります：

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script> 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 

とあなたのモジュールの依存関係があります。

angular.module('myApp', ['ui.bootstrap']); 

を次に、あなたはそれが名前$uibModalによって注入しています。