使模态依赖函数的最简洁方法？ AngularJS

Question

I have a modal that gets displayed on a click of a button, when that button is clicked it also triggers a couple of javascript functions. is there a way to prevent the modal from displaying if one of the functions is false?

<form ng-submit="checkValues(); makeChange();" class="form-inline">
    <div class="form-group">
        <input type="text" ng-model="newChange.amount" maxlength="15" class="form-control"/>
        <button type="submit" data-toggle="modal" data-target="#myModal" class="btn btn-default" >Go</button>
    </div>
</form>

Answer 1

you should use $modal service of angular-ui-bootstrap. so you can check if conditions are met and programatically open your modal.

here is a sample

<form ng-submit="checkValues();" class="form-inline">
    <div class="form-group">
        <input type="text" ng-model="newChange.amount" maxlength="15" class="form-control"/>
        <button type="submit" class="btn btn-default" >Go</button>
    </div>
</form>

scope.checkValues = {
    if(!everything.ok){
        //error message maybe
        return;
    }

    var modalInstance = $modal.open({

      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      resolve: {
        items: function () {
          return items;
      }
     }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
     });
    };

note: if you need programmatic check for validation. i would recommend you to do validation on form element. using

<form name="valueForm" ng-submit="valueForm.$valid && checkValues();" class="form-inline">
<div class="form-group">
    <input type="text" name="amount" ng-model="newChange.amount" ng-maxlength="15" class="form-control"/>
    <button type="submit" class="btn btn-default" >Go</button>
</div>
</form>

Answer 2

Since you are not using angular-ui-bootstrap, here is a way to do it using Bootstrap's Javascript.

Since it's DOM related, it'd be best to put this in a directive like so. This gives you a reusable button. All you need to do is pass it a function reference which it will call to check whether or not to open the modal.

HTML:

<div open-modal="#myModal" check="demo.check()">Go</div>

JS:

.directive('openModal', function() {
  return {
    restrict: 'EA',
    scope: {},
    replace: true,
    bindToController: {
      check: '&',
      openModal: '@'
    },
    transclude: true,
    template: '<button type="button" class="btn btn-primary btn-lg" ng-transclude ng-click="vm.onClick()"></button>',
    controllerAs: 'vm',
    controller: function() {
      var vm = this;

      vm.onClick = function() {
        if (vm.check()) {
          $(vm.openModal).modal('show');
        }
      };
    }
  }
});

Plunker: http://plnkr.co/edit/ukDuPZOaGrYQSwCnhe51?p=preview