相关疑难解决方法(0)

我们有一个页面打开一个模式对话框,其形式如下所示.然而,当我们点击应该处理表单操作的控制器时,表单对象是未定义的,我太过一个Angular新手来理解为什么......

这是父页面控制器保存打开模态对话框的功能:

app.controller('organisationStructureController', ['$scope', ..., '$modal', function ($scope, ..., $modal) {

    $scope.openInvitationDialog = function (targetOrganisationId) {
      $modal.open({
          templateUrl: 'send-invitation.html',
          controller: 'sendInvitationController',
          resolve: {$targetOrganisationId: function () {
            return targetOrganisationId;
          }
          }
        }
      );
    };

在这样的页面上:

// inside a loop over organisations
<a ng-click="openInvitationDialog({{organisation.id}})">Invite new member</a>

邀请对话框html看起来像这样:

    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <!-- ... -->
            </div>
            <div class="modal-body">
                <form name="invitationForm">

                    <div class="form-group">
                        <label for="email" style="color:white;">Email</label>
                        <input type="email" class="form-control"  autocomplete="off" placeholder="New member email" id="email" name="email" ng-model="invitation.email" required="true"/>
                        <span class="error animated fadeIn" ng-show="invitationForm.email.$dirty …

AngularJS的新功能,似乎无法找出此错误的含义.我发现其他一些人有同样的错误,但似乎他们的问题与我的问题无关.

未知的提供者:$ modalProvider < - AngularJS的$ modal错误(似乎我有最新的ui-bootstrap版本)

所有其他人似乎都有模态的范围问题,但我似乎无法开始模态,所以我认为这些不相关.请告诉我,如果我错了,情况如何:

使用AngularUI Bootstrap Modal在AngularJS中的范围问题

Angular UI模式的范围问题

我ui-bootstrap-tpls-0.6.0.min.js从这里抓住了脚本:https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files我甚至尝试添加ui-bootstrap-0.6.0.min.js脚本,并认为可能需要它.虽然如果我正确地阅读它,似乎我选择了ui-bootstrap-0.6.0.min.js脚本我还需要在这里获取所有模板https://github.com/angular-ui/bootstrap/tree/master/template 这似乎是如果我只使用基于错误的脚本:

Error: Failed to load template: template/modal/window.html
Error: Failed to load template: template/modal/backdrop.html

我已经创建了一个包含所有内容的插件,以简化解释结构等,并在此处粘贴所有代码.

http://plnkr.co/edit/yg3G8uKsaHNnfj4yNnJs?p=preview

错误(通过在控制台打开的情况下测试plunker上的代码可以看到)如下:

Error: Unknown provider: $modalInstanceProvider <- $modalInstance
     at Error (<anonymous>)
     at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:30:24
     at Object.c [as get] (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:310)
     at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:30:109
     at c (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:310)
     at d (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:444)
     at Object.instantiate (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:29:80)
     at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:53:80
     at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:44:136
     at m (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:6:494)

如果有人能够对我在这里做错了什么有所了解.它似乎不是范围问题.更像是设置问题,还是我手动引导应用程序的方式？

我试图从模态控制器(Plunkr)访问表单,但myForm似乎不可访问.如何获得工作警报:

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

和模板:

<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 …