使用 angular.js 和 ui.bootstrap 时，模式内部的按钮单击事件不会触发

Question

我在使用 Bootstrap 模式和 AngularJS 时遇到一个非常奇怪的问题。我正在使用 UI Bootstrap's web site 作为参考。下面是我正在使用的代码片段。在用户指令中，对于单击添加新用户按钮，我试图显示 modal-user.html。模态似乎没有任何问题，但模态本身点击的取消按钮似乎没有触发。浏览器日志中也没有任何内容。

// app.js
(function() {
  var lv = angular.module("LogViewer", ['ui.bootstrap']);
})();

//controller.js
(function() {
  var ctrl = angular.module("LogViewer");

  ctrl.controller("TabCtrl", function() {
    this.currentTbIndex = 3;
    this.SetTab = function(tbIndex) {
      this.currentTbIndex = tbIndex;
    };

    this.isActiveTab = function(tbIndex) {
      return this.currentTbIndex == tbIndex;
    }
  });

  ctrl.controller("mldUserInformationCtrl", function($scope, $modalInstance, user) {
    $scope.User = user;
    $scope.cancel = function() {
      debugger;
      $modalInstance.dismiss("cancel");
    };
  });
})();

// directive.js


(function() {

  var dir = angular.module("LogViewer");

  dir.directive("user", function() {
    return {
      restrict: "E",
      templateUrl: "/Directives/user.html",
      scope: true,
      controller: ["$scope", "$modal",
        function($scope, $modal) {

          this.UserExists = function() {
            return ($scope.currentOrg != null && $scope.dataLayer.UserExistsForOrg($scope.currentOrg))
          };

          this.OpenUserInfo = function(userInfo) {

            var modalInstance = $modal.open({
              templateUrl: $scope.UserModal, // stands for user-modal.html
              controller: "mldUserInformationCtrl",
              scope: $scope,
              resolve: { // used to send in parameter
                user: userInfo
              }
            });

            modalInstance.result.then(function() {}, function() {
              debugger;
            })
          };
        }
      ],
      controllerAs: "us"

    };
  });

})();

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="LogViewer">

<head lang="en">
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Log Viewer</title>
  <script type="text/javascript" src="Scripts/ReferenceLibraries/angular.js"></script>
  <script type="text/javascript" src="Scripts/ReferenceLibraries/ui-bootstrap-tpls-0.12.0.min.js"></script>
  <script type="text/javascript" src="Scripts/Code/app.js"></script>
  <script type="text/javascript" src="Scripts/Code/directive.js"></script>
  <script type="text/javascript" src="Scripts/Code/controller.js"></script>
  <script type="text/javascript" src="Scripts/Code/data.js"></script>
</head>

<body role="document" ng-controller="MainBodyCtrl as m">
  <div class="container theme-showcase" role="main">
    <div class="page-header">
      <h3>Log Viewer</h3>
    </div>
    <div class="panel panel-default">
      <div class="panel-body">
        <div class="form-group">
          <label for="ddlOrganisation" class="control-label col-xs-2">Organisation Name</label>
          <div class="col-xs-10">
            <select id="ddlOrganisation" class="form-control input-sm" disabled="disabled" ng-model="currentOrg.Id" ng-options="item.id as item.name for item in AllOrganisations">
              <option value="" selected="selected">Select Organisation</option>
            </select>
          </div>
        </div>

      </div>
    </div>

    <div ng-controller="TabCtrl as tb">
      <ul class="nav nav-tabs" role="tablist">
        <li ng-class="{active : tb.isActiveTab(1)}" role="presentation"><a href ng-click="tb.SetTab(1)">Log</a> 
        </li>
        <li ng-class="{active : tb.isActiveTab(2)}" role="presentation"><a href ng-click="tb.SetTab(2)">Organisation</a>
        </li>
        <li ng-class="{active : tb.isActiveTab(3)}" role="presentation"><a href ng-click="tb.SetTab(3)">User</a>
        </li>
        <li ng-class="{active : tb.isActiveTab(4)}" role="presentation"><a href ng-click="tb.SetTab(4)">Service</a>
        </li>
      </ul>

      <!--The Main Log-->
      <div ng-show="tb.isActiveTab(1)" class="">
        <div class="panel-body">
          <!--Log-->

        </div>
      </div>

      <!--Organisation-->
      <div ng-show="tb.isActiveTab(2)" class="">
        <organisation></organisation>
      </div>

      <!--this is for user-->
      <div ng-show="tb.isActiveTab(3)" class="">
        <user></user>
      </div>
      <div ng-show="tb.isActiveTab(4)" class="">
        <div class="panel-body">
          this is for service
        </div>
      </div>
    </div>
  </div>
</body>

</html>


<!--directive name : user-->

<div class="panel-body">
  <div class="alert alert-danger" ng-show="!us.UserExists()" role="alert">
    <h4>No User Exists</h4>
    The organisation does not have any user. You must <a href ng-click="us.OpenUserInfo()">create</a> user to proceed.
  </div>
  <div ng-show="us.UserExists()">
    <div class="form-horizontal">
      <p>
        <button class="btn btn-default" type="button" ng-click="us.OpenUserInfo(null)">
          <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
          Add New User
        </button>
      </p>
    </div>
  </div>
</div>



<!--User Modal-->
<div class="modal-dialog" role="dialog">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title" id="myModalLabel">User Information</h4>
  </div>
  <div class="modal-body">
    <form class="form-horizontal">
      <div class="form-group">
        <label for="userName" class="control-label col-xs-2">Name</label>
        <div class="col-xs-10">
          <input type="text" class="form-control" id="userName" ng-model="mldUserInformationCtrl.User.Name" placeholder="Name of the User">
        </div>
      </div>
      <div class="form-group">
        <label for="userFrName" class="control-label col-xs-2">Friendly Name</label>
        <div class="col-xs-10">
          <input type="text" class="form-control" id="userFrName" ng-model="mldUserInformationCtrl.User.FriendlyName" placeholder="Friendly Name">
        </div>
      </div>

      <div class="form-group">
        <label for="userPassword" class="control-label col-xs-2">Password</label>
        <div class="col-xs-10">
          <input type="password" class="form-control" ng-model="mldUserInformationCtrl.User.Password" id="userPassword" placeholder="Password">
        </div>
      </div>

      <div class="form-group">
        <label for="userDescription" class="control-label col-xs-2">Description</label>
        <div class="col-xs-10">
          <textarea rows="4" class="form-control" id="userDescription" placeholder="User Description">{{mldUserInformationCtrl.User.Description}}</textarea>
        </div>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-ng-click="mldUserInformationCtrl.cancel()">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>

</div>

<div class="panel-body">
    <div class="alert alert-danger" ng-show="!us.UserExists()" role="alert">
        <h4>No User Exists</h4>
        The organisation does not have any user. You must <a href ng-click="us.OpenUserInfo()">create</a> user to proceed.
    </div>
    <div ng-show="us.UserExists()">
    <div class="form-horizontal" >
        <p>
            <button class="btn btn-default" type="button" ng-click="us.OpenUserInfo(null)">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                Add New User
            </button>
        </p>
    </div>
    </div>
</div>

Answer 1

很遗憾，您链接的代码没有运行正确。

仅从源代码来看，我相信您的问题可能出在您的函数调用上。尝试将 data-ng-click="mldUserInformationCtrl.cancel()" 更改为 data-ng-click="cancel()"

使用 angular.js 和 ui.bootstrap 时，模式内部的按钮单击事件不会触发

Button Click Event from inside a modal not firing when using angular.js and ui.bootstrap

javascript

angularjs

angular-ui-bootstrap

bootstrap-modal