Question

我有一个模式，只需单击一个按钮即可显示，当单击该按钮时，它还会触发几个javascript函数。如果其中一个函数是假的，有没有办法阻止模态显示？

<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

你应该使用angular-ui-bootstrap的$ modal服务。所以你可以检查是否满足条件并以编程方式打开你的模态。

这是一个示例

<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;
     });
    };

注意：如果您需要编程检查验证。我建议你对表单元素进行验证。使用

<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

由于你没有使用angular-ui-bootstrap，这里有一种方法可以使用Bootstrap的Javascript来实现。

因为它与DOM有关，所以最好把它放在这样的指令中。这为您提供了一个可重复使用的按钮。你需要做的只是传递一个函数引用，它将调用它来检查是否打开模态。

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

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

2 个答案: