angularjs - Button control inside bootstrap modal ui is not working -
how button control inside modal work? able modal open button not work. new angular ui bootstrap. suggestion or great!
here component:
export default function (app) { app.component('review', { templateurl: 'content/app/components/review/review.html', controller: ['$uibmodal', reviewcontroller] }) function reviewcontroller($uibmodal) { var $ctrl = this; $ctrl.showmodal = function() { $uibmodal.open({ templateurl: 'errormodal', backdrop: true, controller: ['$uibmodalinstance', function($uibmodalinstance) { var $ctrl = this; $ctrl.cancel = function () { $uibmodalinstance.dismiss('cancel'); }; }] }) } } }
here html of modal:
<script type="text/ng-template" id="errormodal"> <div class="modal-header"> <h3 class="modal-title">oops!</h3> </div> <div class="modal-body"> test </div> <div class="modal-footer"> <button class="btn btn-default" ng-click="$ctrl.cancel()">okay</button> </div> </script>
option 1
we need assign dynamically modal scope, add property: controlleras: '$ctrl',
a.e.:
$ctrl.showmodal = function() { $uibmodal.open({ templateurl: 'errormodal', backdrop: true, controlleras: '$ctrl', controller: ['$uibmodalinstance', function($uibmodalinstance) { var $ctrl = this; $ctrl.cancel = function () { $uibmodalinstance.dismiss('cancel'); }; }] }) }
option 2
try use modal's $scope
:
//... controller: ['$scope', '$uibmodalinstance', function($scope, $uibmodalinstance) { $scope.cancel = function () { $uibmodalinstance.dismiss('cancel'); }; }], // ...
and in html:
<button class="btn btn-default" ng-click="cancel()">okay</button>
Comments
Post a Comment