Javascript 使模态依赖于函数的最干净的方法？安格拉斯

我有一个模式，点击一个按钮就会显示出来，当点击这个按钮时，它还会触发几个javascript函数。 如果其中一个函数为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>

去

您应该使用angular ui引导的$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;
     });
    };

去
scope.checkValues={
如果（！一切都好）{
//可能是错误消息
返回；
}
var modalInstance=$modal.open({
templateUrl:'myModalContent.html'，
控制器：“ModalInstanceCtrl”，
决心：{
项目：功能（）{
退货项目；
}
}
});
modalInstance.result.then（函数（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>

去

由于您没有使用angular ui引导，下面是一种使用引导的Javascript实现的方法

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

HTML:

Go

JS:

.directive（'openModal'，function（）{
返回{
限制：“EA”，
作用域：{}，
替换：正确，
bindToController：{
勾选：“&”，
OpenModel:“@”
},
是的，
模板：“”，
controllerAs:'vm'，
控制器：函数（）{
var vm=这个；
vm.onClick=function（）{
if（vm.check（））{
$（vm.openModal.modal（'show'）；
}
};
}
}
});

---

Plunker:

你没有使用angular ui引导吗？还没有检查文档，很好的资源。这能帮助我做什么吗？如果你集成了很多引导组件，这会有帮助的。但你不必使用它。

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

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