[FIXED] Angularjs Modal window implementation in my application

Issue

I need to implement modal window for my application but I am not able to do it, I saw multiple examples on net for the same but still, not able to get it proper in my application. I tried to replicate this plunker example in my application http://plnkr.co/edit/M35rpChHYThHLk17g9zU?p=preview
I am getting $modal.open() problem is javascript console as it is not able to read property “Cannot read property ‘open’ of undefined
at Scope.open”
Below is my code for the same.

app.js

(function() {   
    var app = angular.module('app', ['ui.bootstrap', 'ngFileUpload', 'bootstrap.fileField','angularUtils.directives.dirPagination','ui.router','ngRoute']);

        app.config(['$routeProvider',
                        function($routeProvider) {
                $routeProvider

                  .when('/newMember', {
                    templateUrl: 'resources/templates/onBoard.jsp',
                    controller: 'onBoardCtrl'
                  })
                  .when('/toBeInitiated', {
                    templateUrl: 'resources/templates/toBeInitiated.jsp',
                    controller: 'tobeinitiatedCtrl'
                  })
                    .when('/initiated', {
                    templateUrl: 'resources/templates/initiated.jsp',
                    controller: 'initiatedCtrl'
                  })
                    .when('/pending', {
                    templateUrl: 'resources/templates/pendingWithFadv.jsp',
                    controller: 'pendingFadvCtrl'
                  })
                    .when('/inProgress', {
                    templateUrl: 'resources/templates/inProgress.jsp',
                    controller: 'inProgressCtrl'
                  })
                    .when('/completed', {
                    templateUrl: 'resources/templates/completed.jsp',
                    controller: 'completedCtrl'
                  })
                    .when('/accessList', {
                    templateUrl: 'resources/templates/accessList.jsp',
                    controller: ''
                  })
                    .when('/dataUpload', {
                    templateUrl: 'resources/templates/dataUpload.jsp',
                    controller: ''
                  })                  
                  .otherwise({redirectTo: '/'});


            }]);

    app.controller('uploadTestCtrl1',['$scope','$http',function($scope, $http){
        $scope.loading = true;
        $scope.doUpload = function(){
            //console.log('title',$scope.title);
            $scope.loading = true;
            var file1 = $scope.uploadFile
            //var file = $scope.myFile
            console.log('uploadFile',$scope.uploadFile);
            //console.log('uploadFile',$scope.myFile);
            //alert('Upload Initiated');            

            //create form data object
            var fd = new FormData();
            //var file =$scope.myFile;
            //console.log('file is ' + JSON.stringify(file));
            fd.append('title',$scope.title);
            fd.append('file', file1);

            //console.dir(fd);

            //send the file / data to your server
            $http.post('continueFileUpload', fd, {
                 withCredentials : false,
                transformRequest: angular.identity,
                headers: {'Content-Type': undefined}
            }).success(function(data){
                $scope.loading = false;
                //do something on success
                console.log("success");
                alert("Data Saved Successfully"); 
            }).error(function(data, status, headers, config){
                //do something on error
                $scope.loading = false;
                alert(data.message);
                console.log("failed");
            })  

        }       
    }]);    

    app.controller('uploadTestCtrl',['$scope','$http',function($scope, $http){
        $scope.doUpload = function(){
            //console.log('title',$scope.title);
            var file1 = $scope.uploadFile
            //var file = $scope.myFile
            console.log('uploadFile',$scope.uploadFile);
            //console.log('uploadFile',$scope.myFile);
            //alert('Upload Initiated');            

            //create form data object
            var fd = new FormData();
            //var file =$scope.myFile;
            //console.log('file is ' + JSON.stringify(file));
            fd.append('title',$scope.title);
            fd.append('file', file1);

            //console.dir(fd);

            //send the file / data to your server
            $http.post('continueFileUpload1', fd, {
                 withCredentials : false,
                transformRequest: angular.identity,
                headers: {'Content-Type': undefined}
            }).success(function(data){
                //do something on success
                console.log("success");
                alert("Data Saved Successfully");
            }).error(function(data, status, headers, config){
                //do something on error
                alert(data.message);
                console.log("failed");
            })  

        }       
    }]);    


    app.controller('AppController',function ($scope) {
        $scope.name = "Admin";
    }); 


    app.controller('onBoardCtrl',['$scope','$http',function($scope, $http){
        $scope.empList = [];
        $scope.addemp = {};
        $scope.createFailed=false;
        $scope.saveEmp = function(){
          $scope.empList.push($scope.addemp);
          $http({
                url: 'onBoardSubmit',
                method: "POST",
                data: JSON.stringify({empId: $scope.addemp.empId, empName: $scope.addemp.empName, empEmail: $scope.addemp.empEmail, empProgramName: $scope.addemp.empProgramName}),
                headers: {'Content-Type': 'application/json'}
            }).success(function (data, status, headers, config) {
                console.log("success");
                $scope.createFailed=false;
                alert("Data Saved Successfully");
                $scope.reset();

            }).error(function (data, status, headers, config) {
                console.log("failed");
                $scope.createFailed=true;
                $scope.error=data.message;
                alert(data.message);

            });

        };
        $scope.reset = function() {
          $scope.addemp = {};
          $scope.onboardform.$setPristine();
        }

    }]);


        app.controller('tobeinitiatedCtrl',['$scope','$http',function($scope, $http,$modal){
            $scope.initiate=[];
            $scope.names=[];
            $scope.action='initiate';
        //alert("tobeinitiated");
        $scope.toBeInitiatedOnLoad = function(){
            $scope.loading = true;
            //alert($scope.id);
            $http({
                url: 'toBeInitiated',
                method: "GET",
                headers: {'Content-Type': 'application/json'}
            }).success(function (data, status, headers, config) {
                console.log("success");
                $scope.loading = false;
                //$scope.initiate = angular.copy(data);
                //$scope.initiate.push(data);
                $scope.names=data;
                //$scope.initiate = angular.copy($scope.names);
            }).error(function (data, status, headers, config) {
                console.log("failed");
            });
        };

        $scope.toggleSelection=function toggleSelection(x,conf,initiate,initiatedFor){
            alert("change");
            //$scope.initiate=[];
            var idx = $scope.names.indexOf(initiatedFor);
            alert(idx);
            if (conf)
                {
                $scope.initiate.push(x);
                //alert($scope.initiate[0].empName);
                }
            else
                {
                //var idx1 = initiate.indexOf(x.initiatedFor);
                for (var i=0;i<initiate.length;i++)
                    {
                    if (angular.equals(initiate[i],x))
                        initiate.splice(i,1);
                    }
                //alert("false");
                }
        };

        $scope.open = function open () {
            alert("Hi");
             var modalInstance = $modal.open({
                  templateUrl: 'myModalContent.html',
                  controller: ModalInstanceCtrl
                });
        };




        $scope.resendIntitate = function(){
            //$scope.name={};
            var index = 0;
            $scope.initiate.forEach(function (name) {
                console.log('rows #' + (index++) + ': ' + JSON.stringify(name));
            });
            /*var data ={
                    initiatedFor : $scope.name.initiatedFor
            }*/
            alert(JSON.stringify($scope.initiate));
            //alert(JSON.stringify($scope.initiate));
            $http({
                url: 'fromInitiated',
                method: "POST",
                data:JSON.stringify($scope.initiate),
                headers: {'Content-Type': 'application/json'}
            }).success(function (data, status, headers, config) {
                console.log("success");
                //$scope.loading = false;
                //$scope.initiate = angular.copy(data);
                //$scope.initiate.push(data);
                //$scope.names=data;
                //$scope.initiate = angular.copy($scope.names);
            }).error(function (data, status, headers, config) {
                console.log("failed");
            });
        };
    }]);;

    app.controller('ModalInstanceCtrl',function ($scope, $uibModalInstance, items) {
    });

        app.controller('initiatedCtrl',['$scope','$http',function($scope, $http){
                $scope.names=[];
                $scope.initiatedOnLoad = function(){
                    $http({
                        url: 'initiated',
                        method: "GET",
                        headers: {'Content-Type': 'application/json'}
                    }).success(function (data, status, headers, config) {
                        console.log("success");
                        $scope.names=data;
                    }).error(function (data, status, headers, config) {
                        console.log("failed");
                    });
                };      
            }]);


        app.controller('pendingFadvCtrl',['$scope','$http',function($scope, $http){
            $scope.names=[];
            $scope.pendingFadvOnLoad = function(){
                $http({
                    url: 'pendingWithFadv',
                    method: "GET",
                    headers: {'Content-Type': 'application/json'}
                }).success(function (data, status, headers, config) {
                    console.log("success");
                    $scope.names=data;
                }).error(function (data, status, headers, config) {
                    console.log("failed");
                });
            };      
        }]);


        app.controller('inProgressCtrl',['$scope','$http',function($scope, $http){
            $scope.names=[];
            $scope.inProgressOnLoad = function(){
                $http({
                    url: 'inProgress',
                    method: "GET",
                    headers: {'Content-Type': 'application/json'}
                }).success(function (data, status, headers, config) {
                    console.log("success");
                    $scope.names=data;
                }).error(function (data, status, headers, config) {
                    console.log("failed");
                });
            };      
        }]);

        app.controller('completedCtrl',['$scope','$http',function($scope, $http){
            $scope.names=[];
            $scope.completedOnLoad = function(){
                $http({
                    url: 'completed',
                    method: "GET",
                    headers: {'Content-Type': 'application/json'}
                }).success(function (data, status, headers, config) {
                    console.log("success");
                    $scope.names=data;
                }).error(function (data, status, headers, config) {
                    console.log("failed");
                });
            };      
        }]);


    app.controller('TableData', function($scope, $http) {
        $http.get("table_data.json")
        .success(function (response) {
            $scope.names = response.records;

            for (var i=0; i<$scope.names.length; i++){
                $scope.names[i].ReqDateParsed = new Date($scope.names[i].ReqDate);
                $scope.names[i].InitDateParsed = new Date($scope.names[i].InitDate);
                $scope.names[i].CompDateParsed = new Date($scope.names[i].CompDate);
                $scope.names[i].DbDateParsed = new Date($scope.names[i].DbDate);
            }

            $scope.sortType = 'EmpName';
            $scope.sortReverse = false; 
        });      
    });

    app.controller('TabController', function(){
        this.tab = 1;
        this.setTab = function(newValue){
            this.tab = newValue;
        };
        this.isSet = function(tabName){
            return this.tab === tabName;
        };
        this.content =  details;
    });


    app.directive('toBeInitiated', function(){
        return{
            restrict: 'E',
            templateUrl: 'toBe-Initiated.html'
        };
    });


    var details = [
        {
            description: "Description1",
            accessCount: 2,
            greenCount: 3,
            orangeCount: 2
        }
    ];


    app.factory('Excel',function($window){
        var uri='data:application/vnd.ms-excel;base64,',
            template='<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
            base64=function(s){return $window.btoa(unescape(encodeURIComponent(s)));},
            format=function(s,c){return s.replace(/{(\w+)}/g,function(m,p){return c[p];})};
        return {
            tableToExcel:function(tableId,worksheetName){
                var table=$(tableId),
                    ctx={worksheet:worksheetName,table:table.html()},
                    href=uri+base64(format(template,ctx));
                return href;
            }
        };
    })
    .controller('MyCtrl',function(Excel,$timeout){
      $scope.exportToExcel=function(tableId){ // ex: '#my-table'
            $scope.exportHref=Excel.tableToExcel(tableId,'sheet name');
            $timeout(function(){location.href=exportHref;},100); // trigger download
        }
    });

})();

toBeInitiated.jsp

<!--     <div img src="resources/images/spinner.jpg" ng-show='loading'> -->
      <div class="col-md-1" > </div>      
      <div class="col-md-10">
        <!-- <input type="button" id="btnExport" value=" Export Table data into Excel " onclick="exportToExcel()" /> -->
        <!-- <button type="submit" class="btn btn-primary" id="btnExport" onclick="exportToExcel()">Export to Excel</button> -->
        <!-- <button class="btn btn-link" id="btnExport" > --> <!-- ng-click="exportToExcel('#toBeInitiatedData')"> -->
            <a href="downloadExcel"<span class="glyphicon glyphicon-share"></span> Export to Excel</a>
        <!-- </button> -->
        <div class="data" id="toBeInitiatedData" data-ng-controller="tobeinitiatedCtrl" data-ng-init="toBeInitiatedOnLoad()">
        <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3>I'm a modal!</h3>
        </div>
        <div class="modal-body">
            test
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>
          <table class="table table-hover table-condensed">
            <thead>
              <tr>
                <!-- <th>S.No.</th> -->
                <!-- <th>Employee ID</th> -->
                <th>
                  <a href="#" ng-click="sortType = 'EmpId'; sortReverse = !sortReverse" ng-model="initiatedFor">
                    Employee ID 
                    <span ng-show="sortType == 'EmpId' && !sortReverse" class="fa fa-caret-down"></span>
                    <span ng-show="sortType == 'EmpId' && sortReverse" class="fa fa-caret-up"></span>
                  </a>
                </th>
                <!-- <th>Employee Name</th> -->
                <th>
                  <a href="#" ng-click="sortType = 'EmpName'; sortReverse = !sortReverse" ng-model="empName">
                    Employee Name 
                    <span ng-show="sortType == 'EmpName' && !sortReverse" class="fa fa-caret-down"></span>
                    <span ng-show="sortType == 'EmpName' && sortReverse" class="fa fa-caret-up"></span>
                  </a>              
                </th>
                <!-- <th>Requested By</th> -->
                <th>
                  <a href="#" ng-click="sortType = 'ReqBy'; sortReverse = !sortReverse" ng-model="initiatedBy">
                    Requested By 
                    <span ng-show="sortType == 'ReqBy' && !sortReverse" class="fa fa-caret-down"></span>
                    <span ng-show="sortType == 'ReqBy' && sortReverse" class="fa fa-caret-up"></span>
                  </a>              
                </th>
                <th>
                  <a href="#" ng-click="sortType = 'ReqDateParsed'; sortReverse = !sortReverse" ng-model="requestedDate">
                    Requested Date
                    <span ng-show="sortType == 'ReqDateParsed' && !sortReverse" class="fa fa-caret-down"></span>
                    <span ng-show="sortType == 'ReqDateParsed' && sortReverse" class="fa fa-caret-up"></span>
                  </a>              
                </th>
                <th>Review Data</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              <tr dir-paginate="x in names | orderBy:sortType:sortReverse | filter:query | itemsPerPage:10">
                <!-- <td>{{x.SNo}}</td> -->
                <td>{{x.initiatedFor}}</td>
                <td>{{x.empName}}</td>
                <td>{{x.initiatedBy}}</td>
                <td>{{x.requestedDate | date: 'dd-MMM-yyyy'}}</td>
                <td><button type="button" class="btn btn-link" ng-click="open()">View {{x.initiatedFor}}</button></td>
                <td>                
                  <select name="action" class="selectContainer actionSelect form-control" ng-model= "action"title="Select 1 action" width="50px">
                    <option value="resend">Resend</option>
                    <option value="initiate">Initiate</option>
                  </select>
                </td>
                <td><input type="checkbox" ng-model="confirmed" ng-click="toggleSelection(x,confirmed,initiate,initiatedFor)" value="{{x}}" /></td>
              </tr>
            </tbody>        
          </table>

          <dir-pagination-controls max-size="10" direction-links="true" boundary-links="true"></dir-pagination-controls>    
        <button class="btn btn-primary pull-right" ng-click="resendIntitate()">Resend/Initiate</button>
        </div>

        <div>
            <!-- <button class="btn btn-primary pull-right" ng-click="resendIntitate()">Resend/Initiate</button> -->
        </div>      
      </div>      
      <div class="col-md-1"> </div>
     <!--  </div> --

home.jsp

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html>
<html>

<head>
  <title>Background Check App</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">  

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="resources/css/style.css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>

<body ng-app="app" ng-controller="TabController as tab">
  <div class="container-fluid" ng-controller="TableData">  
        <div class="row jumbotron" ng-controller="AppController" ng-include="'resources/templates/header.jsp'"></div>   
        <!-- <div class="row" ng-include="'templates/navigation.html'"></div>    -->
        <div class="row">
            <div class="col-md-1"></div> 
            <div class="col-md-7 tab" ng-include="'resources/templates/navigation.jsp'"></div>
            <div class="col-md-1"></div>
            <div class="col-md-3">
                <form class="navbar-form navbar-left" role="search">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search" name="q" ng-model="query">
                        <div class="input-group-btn">
                            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                        </div>          
                    </div>
                    <!-- <button class="close">&times;</button> -->
                </form>
            </div>
        </div>  
        <hr>
        <div class="row" id="home" ng-show="tab.isSet(1)" ng-include="'resources/templates/homeData.jsp'"></div>        
        <!-- <toBe-Initiated ng-show="tab.isSet(2)"></toBe-Initiated> -->
        <!-- <div class="row" ng-show="tab.isSet(2)" id="toBeInitiated" ng-include="'resources/templates/toBeInitiated.jsp'"></div> -->
        <!-- <div class="row" ng-show="tab.isSet(3)" id="initiated" ng-include="'resources/templates/initiated.jsp'"></div>
        <div class="row" ng-show="tab.isSet(4)" id="pending" ng-include="'resources/templates/pendingWithFadv.jsp'"></div>
        <div class="row" ng-show="tab.isSet(5)" id="inProgress" ng-include="'resources/templates/inProgress.jsp'"></div>    
        <div class="row" ng-show="tab.isSet(6)" id="completed" ng-include="'resources/templates/completed.jsp'"></div>
        <div class="row" ng-show="tab.isSet(7)" id="accessList" ng-include="'resources/templates/accessList.jsp'"></div>
        <div class="row upload" ng-show="tab.isSet(8)" id="dataUpload" ng-include="'resources/templates/dataUpload.jsp'"></div>
        <div class="row" ng-show="tab.isSet(9)" id="newMember" ng-include="'resources/templates/onBoard.jsp'"></div> -->
        <div class="footer"></div>  
  </div>
    <div ng-view></div>
    <!--scripts -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script src="resources/angular/angular.js"></script>
    <!-- <script src="resources/angular/ui-bootstrap-tpls.js"></script> -->
    <!-- <script src="resources/angular/ui-bootstrap.js"</script> -->
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.0.js"</script>

    <script src="http://urigo.github.io/angular-spinkit/javascripts/angular-spinkit.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
  <script src="https://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
  <script src="resources/angular/bootstrap-table-angular.js"></script>
  <script src="resources/angular/bootstrap-table-all.js"></script>
  <script src="resources/scripts/app.js"></script>
  <script src="resources/scripts/loginValidate.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
  <script src="resources/angular/angular-bootstrap-file-field.js"></script>
  <!-- <script src="js/app.js"></script> -->
 <!--  <script src="silviomoreto-bootstrap-select-a8ed49e/dist/js/bootstrap-select.js"></script>  -->
    <!-- <script src="https://code.jquery.com/jquery.js"></script> -->
    <script src="https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
  <script src="resources/angular/ng-file-upload/ng-file-upload-shim.js"></script> <!-- for no html5 browsers support -->
  <script src="resources/angular/ng-file-upload/ng-file-upload.js"></script>
    <script src='resources/angular/angular-upload.min.js'></script>  
  <script src="resources/angular/dirPagination.js"></script>
  <script src="resources/angular/angular-route.js"></script>

    <!--scripts -->
</body>

</html>

Solution

 app.controller('tobeinitiatedCtrl',['$scope','$http',function($scope, $http,$modal){

you do not inject $modal hence $modal will be undefined.
try this instead:

     app.controller('tobeinitiatedCtrl',['$scope','$http','$modal',function($scope, $http,$modal){

Answered By – Patrick Kelleter

Answer Checked By – Senaida (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published