使模式依赖于功能的最干净的方法？ AngularJS

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

笨蛋：http://plnkr.co/edit/ukDuPZOaGrYQSwCnhe51?p=preview

使模式依赖于功能的最干净的方法？ AngularJS

cleanest way to make a modal dependent on a function? AngularJS

javascript

jquery

angularjs

bootstrap-modal