当使用angular.js和ui.bootstrap时，从模态内部的按钮单击事件未触发
Button Click Event from inside a modal not firing when using angular.js and ui.bootstrap
在AngularJS中使用Bootstrap模态时，我遇到了一个非常特殊的问题。我正在使用UI Bootstrap的网站作为参考。下面是我正在使用的代码片段。在用户指令中，对于添加新用户按钮点击，我试图显示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">×</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>
很遗憾，您链接的代码没有正确运行。
仅从来源来看，我相信您的问题可能与函数调用有关。尝试将data-ng-click="mldUserInformationCtrl.cancel()"更改为仅data-ng-click="cancel()"
相关文章：
- 在Javascript中选择Dynamicly Created单选按钮组并显示内部文本
- 镀铬延长件内部的聚合物纸按钮不起作用
- 点击一个按钮，有没有一种方法可以检查Div内部的图像
- 如何更新按钮内部的文本，每行重复一次
- 使用内部脚本的SVG单选按钮逻辑
- 按下iframe内部的Youtube订阅表单按钮
- CKEditor内部的jQuery模式问题与按钮
- 单击警报按钮后的内部内容
- 在窗体内部单击jQuery句柄按钮
- 单击ASP.NET按钮(位于UpdatePanel内部）以清除TextBox(位于UpdatePanel外部）
- 当使用angular.js和ui.bootstrap时，从模态内部的按钮单击事件未触发
- 如何在模态内部单击按钮时调用函数
- 更改iFrame'通过jQuery在其内部通过按钮的s页面
- ASP表单在服务器上运行，不允许内部HTML按钮onlick setInterval工作
- 如何使用jQuery选择按钮内部的元素
- 按钮内部的jQuery加载程序图像仅适用于Chrome
- Jquery:切换时更改按钮内部的文本'显示'
- 检查按钮内部的类，如果它通过验证，以某种方式将其与同一按钮上的另一个类交换
- Angular JS-如何根据变量值更改按钮内部的文本
- 如何防止按钮内部span标签在按钮点击时不可点击或无响应
