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

Question

I have a very peculiar issue when using Bootstrap modal with AngularJS. I am using UI Bootstrap's web site for my reference. 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. 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()"

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

Question

1 answers

solution1
1 ACCPTED 2015-02-15 23:56:23

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

Question

1 answers

solution1 1 ACCPTED 2015-02-15 23:56:23

solution1
1 ACCPTED 2015-02-15 23:56:23