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

Question

I have a very peculiar issue when using Bootstrap modal with AngularJS. 在AngularJS中使用Bootstrap模态时，我遇到了一个非常特殊的问题。 I am using UI Bootstrap's web site for my reference. 我正在使用UI Bootstrap的网站作为参考。 Below is the code snippet I am using. 以下是我正在使用的代码段。 In the user directive, for add new user button click, I am trying to show modal-user.html. 在用户指令中，要添加新的用户按钮，请尝试显示modal-user.html。 The modal seems to appear without any problem but the cancel button inside the modal itself click does not seems to fire. 模态似乎没有问题，但是模态本身单击中的“取消”按钮似乎没有触发。 There's nothing in the browser log either. 浏览器日志中也没有任何内容。

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

Unfortunately, the code you linked does not run correctly. 不幸的是，您链接的代码无法正确运行。

Just from looking at the source, I believe your issue might be with your function call. 仅查看源代码，我相信您的问题可能出在函数调用上。 Try changing data-ng-click="mldUserInformationCtrl.cancel()" to just data-ng-click="cancel()" 尝试将data-ng-click="mldUserInformationCtrl.cancel()"更改为data-ng-click="cancel()"

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-02-15 23:56:23

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-02-15 23:56:23

解决方案1
1 已采纳 2015-02-15 23:56:23