コントローラからモーダルを表示する角度js

Question

角度jを初めて使用しており、角度jを使って簡単なモーダルを作成しようとしています。以下は、以下のボタン

<button class="btn btn-primary" type="button" id="modal" ng-click="create()">Create</button> 

をクリックすることで呼び出されたモーダル

<div id="sampleModal" class="modal fade" tabindex="-1" role="dialog"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Sample Modal</h4> 
     </div> 
     <div class="modal-body"> 
      <div class="form-group"> 
       <h5>Name</h5> 
       <input type="text" class="form-control" id="name" placeholder="Enter a name"> 
      </div> 
      <div class="form-group"> 
       <div style="text-align:center;"> 
       <button type="submit" class="btn btn-primary btn-sm">Submit</button> 
       <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button> 
       </div> 
      </div>  
     </div> 
    </div> 
    </div> 
</div> 

以上モーダルのための私のコードで、私のコントローラは

var App = angular.module('myApp', []); 
App.controller('homeCtrl', ['$scope',function($scope,) { 
     $scope.create = function() { 

     //code to show the modal 
    } 
    }]); 

はどのように書く必要があります以下の通りです。私の作成機能は、モーダルを表示するためです。私は多くのチュートリアルを見てきましたが、それを実現する方法を見つけることができませんでした。

ありがとうございます。

Answer 1

角度UIブートストラップをご覧ください。優れたモーダルサポートと、あなたを助けるための例があります。

https://angular-ui.github.io/bootstrap/#/modal

Answer 2

ステップ1：モーダルコントローラと相互作用しない直接開きました。

<button class="btn btn-info btn-sm" data-toggle="modal" data-target="#sampleModal">Create 
    </button> 

ステップ2：コントローラーと相互作用します。

<button class="btn btn-primary" type="button" ng-click="create()">Create</button> 

var App = angular.module('myApp', []); App.controller('homeCtrl', ['$scope',function($scope,) { 
     $scope.create = function() { 

     angular.element('#sampleModal').modal('show'); 
    } 

}]); 

N.B：モーダルは、bootstrapである必要があります。プロジェクトにはJqueryをロードする必要があります。