AngularJSモーダルウインドウディレクティブ

Question

私は、Twitter Bootstrap ModalのディレクティブangularJSディレクティブを作成しようとしています。ここで

var demoApp = angular.module('demoApp', []); 

demoApp.controller('DialogDemoCtrl', function AutocompleteDemoCtrl($scope) { 
    $scope.Langs = [ 
     {Id:"1", Name:"ActionScript"}, 
     {Id:"2", Name:"AppleScript"}, 
     {Id:"3", Name:"Asp"}, 
     {Id:"4", Name:"BASIC"}, 
     {Id:"5", Name:"C"}, 
     {Id:"6", Name:"C++"} 
    ]; 

    $scope.confirm = function (id) { 
     console.log(id); 
     var item = $scope.Langs.filter(function (item) { return item.Id == id })[0]; 
     var index = $scope.Langs.indexOf(item); 
     $scope.Langs.splice(index, 1); 
    }; 
}); 

demoApp.directive('modal', function ($compile, $timeout) { 
    var modalTemplate = angular.element("<div id='{{modalId}}' class='modal' style='display:none' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'><div class='modal-header'><h3 id='myModalLabel'>{{modalHeaderText}}</h3></div><div class='modal-body'><p>{{modalBodyText}}</p></div><div class='modal-footer'><a class='{{cancelButtonClass}}' data-dismiss='modal' aria-hidden='true'>{{cancelButtonText}}</a><a ng-click='handler()' class='{{confirmButtonClas}}'>{{confirmButtonText}}</a></div></div>"); 
    var linkTemplate = "<a href='#{{modalId}}' id= role='button' data-toggle='modal' class='btn small_link_button'>{{linkTitle}}</a>" 

    var linker = function (scope, element, attrs) { 
     scope.confirmButtonText = attrs.confirmButtonText; 
     scope.cancelButtonText = attrs.cancelButtonText; 
     scope.modalHeaderText = attrs.modalHeaderText; 
     scope.modalBodyText = attrs.modalBodyText; 
     scope.confirmButtonClass = attrs.confirmButtonClass; 
     scope.cancelButtonClass = attrs.cancelButtonClass; 
     scope.modalId = attrs.modalId; 
     scope.linkTitle = attrs.linkTitle; 

     $compile(element.contents())(scope); 
     var newTemplate = $compile(modalTemplate)(scope); 

     $(newTemplate).appendTo('body'); 

     $("#" + scope.modalId).modal({ 
      backdrop: false, 
      show: false 
     }); 
    } 

    var controller = function ($scope) { 
     $scope.handler = function() { 
      $timeout(function() { 
       $("#"+ $scope.modalId).modal('hide');   
       $scope.confirm();    
      }); 
     } 
    } 

    return { 
     restrict: "E", 
     rep1ace: true, 
     link: linker, 
     controller: controller, 
     template: linkTemplate 
     scope: { 
      confirm: '&' 
     } 
    }; 
});​ 

はhttp://jsfiddle.net/okolobaxa/unyh4/15/

JsFiddle一例である。しかし、ハンドラ（）関数は、ページ上のディレクティブのように何度も実行されます。どうして？正しい方法は何ですか？

Answer 1

AngularJSのV1.2からngAnimateを活用Bootstrap3ためAngularStrapで働いネイティブ実装があります+

• デモ：あなたはまた、チェックアウトすることをお勧めしますhttp://mgcrea.github.io/angular-strap/##modals

：

• 出典：https://github.com/mgcrea/angular-strap/blob/master/src/modal/modal.js
• Plunkr：http://plnkr.co/edit/vFslNmBAoKPVXtdmBXgv?p=preview

Answer 2

あなたがこれを再発明しない限り、そうでなければすでに解決策があると思います。

AngularUIからthisをご覧ください。これは、Twitterのブートストラップなしで実行されます。

Answer 3

私は、twitterブートストラップのモーダルを使っているだけで、twitterブートストラップのドキュメントが言う通りに動作することが分かりました。

私の管理ページにユーザー編集フォームを格納するためにモーダルを使用しています。私がそれを起動するために使用するボタンには、ユーザーIDをそのスコープの関数に渡すng-click属性があり、その属性がサービスに渡されます。モーダルの内容は、サービスからの変更をリッスンし、フォームに表示する値を更新する独自のコントローラーに関連付けられています。

ですから、ng-click属性は実際にデータを渡すだけですが、データトグルタグとhrefタグではまだモーダルがトリガーされます。モーダル自体の内容に関しては、それは部分的です。したがって、ページ上に複数のボタンがあり、それらはすべて、マークアップ内のモーダルの単一インスタンスをトリガーします。クリックされたボタンに応じて、そのモーダルのフォームの値は異なります。

私のコードを見て、私がplnkrデモを構築するためにそれを引き出すことができるかどうかを見ていきます。

EDIT： 私は一緒に投げてきた私は私のアプリで使用しているものを基本的に示す迅速plunkerデモ：http://embed.plnkr.co/iqVl0Wb57rmKymza7AlI/preview

ボーナスは、2個のパスワードフィールドの一致を保証するために、いくつかのテストを得た（またはエラーが発生したとして、それらを強調しています）、パスワードが一致しない場合、または新しいユーザー名とパスワードのフィールドが空の場合は、送信ボタンを無効にします。もちろん、saveは何もしません。それは単なるデモです。

お楽しみください。

Answer 4

私はそれが遅れるかもしれない知っているが、私は練習として、なぜハンドラが呼ばれました何回かを把握しようとして始めたと行ってまで、私は止めることができませんでした：P

理由でした各モーダルに対して作成した各divには一意のIDはありませんでした。これの正確な理由は何かを聞かないでください。おそらく$（ '＃' + scope.modalId）.modal（）呼び出しと関係があります。他の誰かが:)