Can't Open A Modal Window In Angularjs, Using Bootstrap

This is my app.js file: const app = angular.module('CurseTransport', [ 'ui.router', 'ui.bootstrap', 'ngMessages', 'raceModule', ]) app.config(['$stateProvider',

Solution 1:

Have you read the documentation? https://angular-ui.github.io/bootstrap/#/modal

You need to use templateUrl, not template when referencing your modal template, and be sure to include the file extension:

$modal.open({
  templateUrl: 'views/racesInsert.html',
  windowClass : 'show',
  ...

Only use template if you are defining the template inline like this:

$modal.open({
  template: '<divclass="modal-header"><h1>Modal Heading</h1></div>...',
  windowClass: 'show',
  ...

If you are using an inline template as a script, you need to declare the template with a proper script tag. And, do NOT include the outer dialog container:

<scriptid="racesInsert.html"type="text/ng-template"><!-- Modal content--><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal">&times;</button><h4class="modal-title">Modal Header</h4></div><divclass="modal-body"><p>Some text in the modal.</p></div><divclass="modal-footer"><buttontype="button"class="btn btn-default"data-dismiss="modal">Close</button></div></div></script>

$modal.open({
  templateUrl: 'racesInsert.html',
  windowClass : 'show',
  ...

You did not mention which version of Angular UI Bootstrap you are using. The current version uses $uibModal not $modal as the imported module.

Solution 2:

Here is the js function you need to call for modal-

$scope.functionName=function(){
 var uibModalInstance = $uibModal.open({
        animation: true,
        templateUrl: 'html page path',
        controller: 'controllerName',
        size: 'lg',
        resolve: {
            deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                return$ocLazyLoad.load({
                    name: 'app Name',
                    insertBefore: '#ng_load_plugins_before',
                    files: ['js controller file path']
                });
            }]
        }
    });
    uibModalInstance.result.then(function (selectedItem) {
        $scope.selected = selectedItem;
    }, function () {

     });
}

Call the function functionName when you need to open the popup.

You need to add $uibModal as dependencies in current controller and the model controller should have $uibModalInstance as dependencies.