从控制器显示模态角js

Question

我是新来的角js和试图创建一个简单的模态使用角js。下面是我的模态

<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> 

和上述模式代码调用上点击以下按钮

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

和我的控制器如下

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

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

我应该怎么写我的创建功能，以显示模态。我看过很多教程，但找不到一种方法来实现这一目标。

谢谢。

Answer 1

查看Angular UI Bootstrap。它具有出色的模态支持和一个帮助你的例子。

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必须在项目中加载。