javascript - angular UI-Bootstrap modal not binding with controller -
i create ng-template , bind controller , template pass through ui-bootstrap modal. code :-
vm.uploadfile = function () { var uploadmodal = $uibmodal.open({ animation: true, templateurl: 'upload.html', bindtocontroller: true, controller: 'modalctrl', controlleras: 'modalvm', resolve: { items: function () { } } }); uploadmodal.result.then(function (data) { data.uploadedby = 'admin'; data.filename = data.name; vulgridservice.datastackforfile.unshift(data); vulgridservice.gridapi.core.refresh(); }, function () { console.log('modal dismissed at: ' + new date()); } ); } }
my template below:-
<script type="text/ng-template" id="upload.html"> <div class=""> <form name="component" ng-submit="modalvm.upload()" novalidate> <h4 class="margin-null modal-padding bg-primary">upload file</h4> <div class="modal-body"> <div class="form-group"> <label>file type</label><br> <div class="select-drop-down-icon"> <select ng-model="modalvm.file.filetype" name="filetype" class=" cover-block input-field-styling" ng-change="modalvm.checkfile()" required> <option value="">select file extension</option> <option value="qualys">qualys(.xml)</option> <option value="nessus">nessus(.nessus)</option> <option value="zip">.zip</option> </select> </div> </div> <div class="form-group bottom-spacing"> <label>file upload</label><br> <div class="cover-block form-control padding-null"> <input class="border-null text-field-padding" ng-model="modalvm.file.name"> <!--<file-field ng-change="modalvm.checkfile(uploadfile.name)"--> <!--class="btn btn-primary inline-view pull-right "--> <!--ng-model="uploadfile">--> <!--<i class="fa fa-upload" aria-hidden="true"></i>--> <!--chose file--> <!--</file-field>--> <div class="btn btn-primary inline-view pull-right upload-field"> <i class="fa fa-upload" aria-hidden="true"></i> chose file <input grab-file-name get-file-name="modalvm.getfilename" type="file" class="upload"> </div> <div class="top-space"> <span class="error-text" ng-show="modalvm.extension"> please select proper extension file </span> </div> </div> </div> <div class="text-center"> <button ng-disabled="modalvm.extension" type="submit" class="btn btn-success sharp mar-right" aria-label="close">save </button> <button type="reset" ng-click="modalvm.cancel()" data-dismiss="modal" class="btn btn-danger sharp mar-right" aria-label="close">cancel </button> </div> </div> </form> </div>
modalctrl
function modalctrl($uibmodalinstance, toastr, datefactory, $scope) { var modalvm = this; modalvm.extension = false; console.log($scope); modalvm.cancel = function () { $uibmodalinstance.dismiss('cancel'); }; modalvm.upload = function (data) { // data.uploadedon = datefactory.getdate(); // $uibmodalinstance.close(data); // toastr.success('file uploaded', 'success', {closebutton: true}); }; modalvm.checkfile = function (file, filetype) { console.log(file, filetype); if (file) { switch (filetype) { case 'nessus': var matchnessus = /[(a-z)(a-z)(0-9^)]+.(nessus)/g; if (matchnessus.test(file)) { console.log('nessus', file); modalvm.extension = false; } else { modalvm.extension = true; } break; case 'qualys': var matchqualys = /[(a-z)(a-z)(0-9^)]+.(xml)/g; if (matchqualys.test(file)) { console.log('qualys', file); modalvm.extension = false; } else { modalvm.extension = true; } break; case 'zip': var matchzip = /[(a-z)(a-z)(0-9^)]+.(zip)/g; if (matchzip.test(file)) { console.log('zip', file); modalvm.extension = false; } else { modalvm.extension = true; } break; default: modalvm.extension = true; break; } } }; modalvm.getfilename = function (gotfilename) { console.log($scope.filetype); modalvm.filename = gotfilename; }; }
in input field not binding controller function invoking, please give hint or solution on it.
Comments
Post a Comment