Отображение модального сигнала от контроллера angular 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 
    } 
    }]); 

Как я должен написать моя функция создания для отображения модального. Я видел много учебников, но не мог найти способ добиться этой работы.

Thank you.

Answer 1

Проверьте Угловой UT 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 должен быть загружен в проект.