Question

来自回购：https://github.com/jmsherry/kitchenapp

住在：https://kitchenapp2.herokuapp.com

如果您点击“＆＃39;请与我们联系”。屏幕右下角的链接出现一个模态。模态编码如下：

<div class="modal-container">
  <button type="button" class="close" aria-label="Close" ng-click="$close(null)">
    <span aria-hidden="true">&times;</span>
  </button>

  <div class="content">
    <h1>Contact Us</h1>
    <div class="contact-form">
      <form ng-submit="vm.sendMessage(this)" novalidate name="contactForm">

        <div class="form-group" ng-if="vm.user && vm.user.email">
          <p class="faux-label">From: <span class="faux-value">{{vm.user.email}}</span></p>
        </div>

        <div class="form-group" ng-class="{ 'has-error' : contactForm.from.$invalid && !contactForm.from.$pristine }" ng-if="!vm.user || !vm.user.email">
          <label for="subject">From</label>
          <input type="email" name="from" id="from" class="form-control" placeholder="From" ng-model="vm.user.email" ng-maxlength="30" ng-required="true" autofocus>
          <ul ng-if="contactForm.from.$invalid && !contactForm.from.$pristine" ng-messages="contactForm.from.$error" class="help-block list-unstyled">
            <li ng-message="maxlength">The subject must be less than 30 characters.</li>
            <li ng-message="email">Not a valid email. Please check carefully and try again...</li>
          </ul>
        </div>

        <div class="form-group" ng-class="{ 'has-error' : contactForm.subject.$invalid && !contactForm.subject.$pristine }">
          <label for="subject">Subject</label>
          <input type="text" name="subject" id="subject" class="form-control" placeholder="Subject" ng-model="vm.email.subject" ng-maxlength="30">
          <ul ng-if="contactForm.subject.$invalid && !contactForm.subject.$pristine" ng-messages="contactForm.subject.$error" class="help-block list-unstyled">
            <li ng-message="maxlength">The subject must be less than 30 characters.</li>
          </ul>
        </div>


        <div class="form-group" ng-class="{ 'has-error' : contactForm.message.$invalid && !contactForm.message.$pristine }">
          <label for="message">Message</label>
          <textarea name="message" id="message" class="form-control" placeholder="Message..." ng-model="vm.email.body" ng-required="true" ng-minlength="10" ng-maxlength="500"></textarea>
          <ul ng-if="contactForm.message.$invalid && !contactForm.message.$pristine" ng-messages="contactForm.message.$error" class="help-block list-unstyled">
            <li ng-message="required">A description is required.</li>
            <li ng-message="minlength">The name must be longer than 10 characters.</li>
            <li ng-message="maxlength">The name must be less than 500 characters.</li>
          </ul>
        </div>

        <!-- <div class="form-group"> -->
          <div class="checkbox">
              <label for="cc_self">
                <input type="checkbox" id="cc_self" name="cc_self" ng-model="vm.email.cc_self">Send a copy to my email.
              </label>
          </div>
        <!-- </div> -->


        <div class="form-group">
          <div class="pull-right">
            <button type="button" class="btn btn-default" ng-click="$close(null)">Cancel</button>
            <button type="submit" class="btn btn-primary" ng-disabled="contactForm.$invalid">Send</button>
          </div>
        </div>

      </form>

    </div>

  </div>
</div>

控制器看起来像：

angular.module('kitchenapp.directives')
    .controller('KaFooterCtrl', ['$scope', '$q', '$log', '$modal', 'Email', 'Auth', 'toastr', function ($scope, $q, $log, $modal, Email, Auth, toastr) {
      var vm = this,
        $user;

      function contact(day) {
        $log.log('contact fn', arguments);

        $modal.open({
          templateUrl: '/views/modals/contact-modal.html',
          controller: function modalController($modalInstance, $scope) {
            $scope.vm = this;
            $scope.vm.email = vm.email;
            $scope.vm.user = vm.user;
            $scope.vm.sendMessage = function () {
              $modalInstance.close();
              $q.when(vm.user, function (user) {
                var $emailSent = Email.sendEmail(vm.email, vm.user);
                $q.when($emailSent, function (res) {
                  toastr.success('Email sent! Thank you for your interest...');

                }, function () {
                  toastr.error('We\'re sorry your email hasn\'t been sent, please try again later...');
                });
              });
              event.preventDefault();
              event.stopPropagation();
            };
          },
          contollerAs: 'vm'
        });

      }

      vm.year = new Date().getFullYear();
      vm.email = {};

      $user = Auth.getUser();
      $q.when($user, function (user) {
        vm.user = user;
      });

      vm.contact = contact;
      vm.name = 'KaFooterCtrl';
    }])
    .directive('kaFooter', function () {
      return {
        restrict: 'E',
        replace: true,
        templateUrl: 'directives/footer/footer.html',
        scope: {
          companyName: '@',
          companyEmail: '@'
        },
        controller: 'KaFooterCtrl as vm',
        bindToController: true
      };
    });
}());

由于某种原因，第一个元素只聚焦一次，但任何进一步的交互和元素都不能通过触摸或鼠标聚焦。任何线索为什么？

由于

Answer 1

因此，当使用ng-touch时，这是一个问题。 ng-touch自动模糊字段（https://github.com/angular/angular.js/pull/11212）。修复工作正在进行中，但是现在用户@jdhiro建议使用指令停止在模态之外传播touchend事件。有关详情，请参阅https://github.com/angular-ui/bootstrap/issues/2017#issuecomment-39515923

Bootstrap模态表单元素不可取消（在移动/移动仿真上）

1 个答案: