从访问控制的角度引导模式窗体 [英] Accessing angular bootstrap modal form from controller

问题描述

我想从模态控制器访问形式（ Plunkr ），但myForm会似乎并没有被访问。如何获得工作警报呼叫：

  angular.module（'plunker'，['ui.bootstrap']）;
VAR ModalDemoCtrl =功能（$范围，$模式，$日志）{
  $ scope.open =功能（）{
    VAR modalInstance = $ modal.open（{
      templateUrl：myModalContent.html'，
      控制器：ModalInstanceCtrl
    }）;
  };
};VAR ModalInstanceCtrl =功能（$范围，$ modalInstance）{
  $ scope.submit =功能（）{
    //如何获得呢？
   警报（$ scope.myForm $脏）;
  };  $ scope.ok =功能（）{
    $ modalInstance.close（）;
  };  $ scope.cancel =功能（）{
    $ modalInstance.dismiss（'取消'）;
  };
};
 

和模板：

 ＆LT; D​​IV NG控制器=ModalDemoCtrl＆GT;
    ＆LT;脚本类型=文/ NG-模板ID =myModalContent.html＆GT;
        ＆LT; D​​IV CLASS =模头＆GT;
            ＆LT; H3＆GT;我是一个模式＆LT;！/ H3 GT＆;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =模体＆GT;
          ＆LT;形式NAME =myForm会NOVALIDATE＆GT;
          ＆LT;输入类型=电子邮件值=你好＆GT;
          ＆LT; /表及GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =模式躯＆GT;
            ＆LT;按钮类=BTN BTN-主要NG点击=提交（）＆GT;确定＆LT; /按钮＆GT;
            ＆LT;按钮类=BTN BTN-警告NG点击=取消（）＆GT;取消＆LT; /按钮＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / SCRIPT＆GT;    ＆LT;按钮类=BTNNG点击=open（）的＆GT;打开ME＆LT;！/按钮＆GT;
    ＆LT; D​​IV NG秀=选择＆GT;从模式选择：{{}选择}＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

本是的的 UI中的自举已知的bug 。的因此注入$ modalInstance现在工作得很好。的

解决办法是要形成实例传递明确提交功能：

＆LT;形式NAME =myForm会NOVALIDATE NG-提交=提交（myForm会）＆GT;
  ＆LT; D​​IV CLASS =模头＆GT;
    ＆LT; H3＆GT;我是一个模式＆LT;！/ H3 GT＆;
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =模体＆GT;
    ＆LT;输入类型=电子邮件值=你好＆GT;
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =模式躯＆GT;
    ＆LT;按钮类=BTN BTN-主要TYPE =提交＆GT;确定＆LT; /按钮＆GT;
    ＆LT;按钮类=BTN BTN-警告NG点击=取消（）＆GT;取消＆LT; /按钮＆GT;
  ＆LT; / DIV＆GT;
＆LT; /表及GT;


VAR ModalInstanceCtrl =功能（$范围，$ modalInstance）{
  $ scope.submit =功能（myForm会）{
   警报（myForm的$脏）;
  };
};


I am trying to access the form from the modal controller (Plunkr) but myForm doesn't seem to be accessible. How to get alert call to work:

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
  $scope.open = function () {
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl          
    });       
  };
};

var ModalInstanceCtrl = function ($scope, $modalInstance) {
  $scope.submit = function() {
    // How to get this?
   alert($scope.myForm.$dirty);
  };

  $scope.ok = function () {
    $modalInstance.close();
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};

And template:

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3>I'm a modal!</h3>
        </div>
        <div class="modal-body">
          <form name="myForm" novalidate>
          <input type="email" value="hello">
          </form>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="submit()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button class="btn" ng-click="open()">Open me!</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>

解决方案

This was an known bug in ui-bootstrap. So injecting $modalInstance works fine now.

Workaround is to pass form instance to the submit function explicitly:

<form name="myForm" novalidate ng-submit="submit(myForm)">
  <div class="modal-header">
    <h3>I'm a modal!</h3>
  </div>
  <div class="modal-body">
    <input type="email" value="hello">
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" type="submit">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
  </div>
</form>

var ModalInstanceCtrl = function ($scope, $modalInstance) {
  $scope.submit = function(myForm) {
   alert(myForm.$dirty);
  };
};

这篇关于从访问控制的角度引导模式窗体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！