Develop Reference

Can't open a modal window in angularjs, using bootstrap

This is my app.js file:
const app = angular.module('CurseTransport', [
'ui.router',
'ui.bootstrap',
'ngMessages',
'raceModule',
])
app.config(['$stateProvider', '$urlRouterProvider', '$qProvider', function($stateProvider, $urlRouterProvider, $qProvider) {
$qProvider.errorOnUnhandledRejections(false)
$urlRouterProvider.otherwise('/races')
$stateProvider
.state('races', {
url : '/races',
templateUrl :'views/races.html',
controller:'racesController'
})
.state('racesInsert', {
url: '/races/insert',
onEnter: ['$stateParams', '$state', '$modal',
function($stateParams, $state, $modal) {
$modal
// handle modal open
.open({
template: 'views/racesInsert',
windowClass : 'show',
controller: ['$scope',
function($scope) {
// handle after clicking Cancel button
$scope.cancel = function() {
$scope.$dismiss();
};
// close modal after clicking OK button
$scope.ok = function() {
$scope.$close(true);
};
}
]
})
// change route after modal result
.result.then(function() {
// change route after clicking OK button
$state.transitionTo('races');
}, function() {
// change route after clicking Cancel button or clicking background
$state.transitionTo('races');
});
}
]
});
}])
My view for modal window:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
When i click my button for open the modal window, it is not working. I have no error in my console. I also included in my scripts.
My modal is located in a different html file.

Have you read the documentation? https://angular-ui.github.io/bootstrap/#/modal
You need to use templateUrl, not template when referencing your modal template, and be sure to include the file extension:
$modal.open({
templateUrl: 'views/racesInsert.html',
windowClass : 'show',
...
Only use template if you are defining the template inline like this:
$modal.open({
template: '<div class="modal-header"><h1>Modal Heading</h1></div>...',
windowClass: 'show',
...
If you are using an inline template as a script, you need to declare the template with a proper script tag. And, do NOT include the outer dialog container:
<script id="racesInsert.html" type="text/ng-template">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</script>
$modal.open({
templateUrl: 'racesInsert.html',
windowClass : 'show',
...
You did not mention which version of Angular UI Bootstrap you are using. The current version uses $uibModal not $modal as the imported module.

Here is the js function you need to call for modal-
$scope.functionName=function(){
var uibModalInstance = $uibModal.open({
animation: true,
templateUrl: 'html page path',
controller: 'controllerName',
size: 'lg',
resolve: {
deps: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'app Name',
insertBefore: '#ng_load_plugins_before',
files: ['js controller file path']
});
}]
}
});
uibModalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
});
}
Call the function functionName when you need to open the popup.
You need to add $uibModal as dependencies in current controller and the model controller should have $uibModalInstance as dependencies.

Weird behaviour of my scope variables

I am new in this field and want to write a app, now I meet some problems. Here is a simple version of my code, what I want is the API only show signUp first. After I press signUp and press submit the button shown should be only signout
Now, my scope variable doesn't work, two button show here. Could you modify it and tell me the reason? Please use the rootscope and scope and sc.logIn() if possible so that I can know how to write in this way. Thanks!
https://plnkr.co/edit/ewhLZsKKTWTzlECsj4xO?p=preview
angular.module('myApp',['myApp.dashboard','myApp.signUp']);
angular.module('myApp.dashboard').controller('mainControl',mainControl);
mainControl.$inject = ['$rootScope','$scope'];
function mainControl($rootScope,$scope){
$rootScope.logged=false;
$scope.logged=$rootScope.logged;
}
angular.module('myApp.signUp').controller('signUpControl',signUpControl);
signUpControl.$inject = ['$rootScope','$scope'];
function signUpControl($rootScope){
alert("haha");
this.logIn=function(){
$rootScope.logged=true;
};
}

There are couple of issues with your code.
Whenever you declare a module without a second argument, it just tries to fetch the module that is already declared / defined. In order to create a new module, you need to pass in the dependencies or an empty array, if there are no dependencies.
Also, you need to watch on the changes being done to the scope to ensure your changes are notified to the controllers to make them visible on the view.
Here is the working solution:
angular.module('myApp', ['myApp.dashboard', 'myApp.signUp']);
angular.module('myApp.dashboard', []).controller('mainControl', mainControl);
function mainControl($rootScope, $scope) {
$rootScope.logged = false;
$rootScope.$watch(() => $rootScope.logged, function() {
$scope.logged = $rootScope.logged;
});
}
mainControl.$inject = ['$rootScope', '$scope'];
angular.module('myApp.signUp', []).controller('signUpControl', signUpControl);
signUpControl.$inject = ['$rootScope', '$scope'];
function signUpControl($rootScope) {
this.logIn = function() {
var a = 1;
$rootScope.logged = true;
};
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="mainControl as mc">
<div>{{mc.logged}}
<div ng-hide="logged">
<button type="button" class="btn" data-toggle="modal" data-target=".signUp">Sign Up</button>
</div>
<div ng-show="logged">
<button>Sign Out</button>
</div>
</div>
<div class="signUp modal fade" id="signUp" ng-controller='signUpControl as sc'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">sigh up</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
</div>
<div class="modal-body">
<form id="signUpForm" name="signUpForm" ng-submit="sc.logIn()">
<label for="email">
<span>email:</span>
<input type="email" name="email">
</label>
<button class="submit" id="signUpSubmit" type="submit" value="signUp">submit</button>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</div>
For some reason the code snippet doesnt let me submit the form.
You can find a working solution here : Codepen

It is not weird at all.
Open your console, it shows errors.
Your main problem is angular bootstrap error.
angular.module('myApp.dashboard', [])
------------------------------- ^^ ------- must be an array even empty

cancel button not working when editing a ng-repeat item (in a modal) using angular copy

I have created a ng-repeat of blocks where I would like to edit a block in a modal window and cancel the window to discard any changes.
I have managed to get the modal window working and editing blocks as I want however I am trying to use angular.copy to create a backup of the original element and set it when cancel is clicked.
here is my html for my ng-repeat:
<div class="container" style="max-width: 600px;">
<div ng-repeat="block in blocks" class="text-muted" ng-drop="true" ng-drop-success="onDropComplete($index, $data ,$event)">
<div class="row" ng-show="textBlock(block)" ng-click="showEditButtons()" ng-drag="true" ng-drag-data="block">
<h4> {{ block.title }} </h4>
<p> {{ block.body }} </p>
<button class="btn btn-default" ng-show="showButtons" ng-click="editBlock(block); modalUpdate(block)">Edit!</button>
<button class="btn btn-default" ng-show="showButtons" ng-click="deleteBlock(block)">Delete!</button><br>
<br>
</div>
</div>
</div>
and here is my html for the modal:
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<form class="form-group">
<input class="form-control" placeholder="Title" type="text" ng-model="block.title" ng-model="titleText"/>
<input class="form-control" placeholder="Main Body" type="text" ng-model="block.body" ng-model="bodyText"/>
<button class="btn btn-success" type="submit" ng-click="saveBlock()"> Save </button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</form>
</div>
</script>
and here is the modal part of the controller:
$scope.modalUpdate = function (selectedBlock) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: function($scope, $uibModalInstance, block){
$scope.backUp = angular.copy(block);
$scope.block = block;
$scope.saveBlock = function () {
$uibModalInstance.close($scope.block);
};
$scope.cancel = function () {
block = $scope.backUp;
$uibModalInstance.dismiss('cancel');
};
},
size: 'sm',
resolve: {
block: function () {
return selectedBlock;
}
}
});
};
However every time I click cancel the changes to the block are still saved and nothing is reverted.
Any help would be awesome!

Try to remove the line
$scope.cancel = function () {
// block = $scope.backUp; <--- this one
$uibModalInstance.dismiss('cancel');
};

controller: function($scope, $uibModalInstance, block){
$scope.backUp = angular.copy(block);
$scope.block = block;
// the above line does not create new instance of $scope.block instead links to block, so whenever $scope.block gets updated, block also gets updated
Change Your code as :
HTML :
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<form class="form-group">
<input class="form-control" placeholder="Title" type="text" ng-model="data.title" ng-model="titleText" />
<input class="form-control" placeholder="Main Body" type="text" ng-model="data.body" ng-model="bodyText" />
<button class="btn btn-success" type="submit" ng-click="saveBlock()"> Save </button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</form>
</div>
</script>
Have changed ng-model to bind to data object
JS :
$scope.modalUpdate = function (selectedBlock) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: function ($scope, $uibModalInstance, block) {
$scope.data = {};
$scope.data.title = block.title;
$scope.data.body = block.body;
$scope.saveBlock = function () {
block.title = $scope.data.title;
block.body = $scope.data.body;
$uibModalInstance.close($scope.block);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
},
size: 'sm',
resolve: {
block: function () {
return selectedBlock;
}
}
});
};
Have assigned to $scope.block only if saveBlock is triggered otherwise nothing happens on cancel

Angular bootstrap ui modal with same controller instead of new controller

I am using angular bootstrap ui modal box it says to give a new $modalInstance for new controller.I want to use the same controller where i have initialized the modal box.I searched but no success.I found this links but no success -
How to use the same controller for modal and non-modal form in Angular UI Bootstrap?
Angular-ui bootstrap modal without creating new controller
app.controller('UserCtrl',['$scope','$filter','ngTableParams','$modal',function($scope, $filter, ngTableParams,$modal) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl', //Instead of this i want to use the same controller 'UserCtrl'
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
};
} ]);
So that i can call the save function on this same controller which is called on save click of modal box

It was possible in older version of UI-Bootstrap 0.10.0
Download Library.Even latest version,it works for me
index.html
<!-- if you are using Bower -->
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js">
</script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js">
</script>
<!-- button click opens modal-->
<button ng-click="openModal()">Button test</button>
<!-- modal -->
<!-- look at 'type' and 'id' values -->
<script type="text/ng-template" id="myTestModal.tmpl.html">
<div class="modal-header">
<h3>Modal Header</h3>
</div>
<div class="modal-body">
<p>Modal Body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="close()" data-dismiss="modal">Close
</button>
<button type="button" class="btn btn-primary" ng-click="doSomething()">Do Something
</button>
</div>
</script>
modalDemoController.js
$scope.openModal=function(){
$scope.modalInstance=$modal.open({
templateUrl: 'myTestModal.tmpl.html',
scope:$scope
});
}
$scope.close=function(){
$scope.modalInstance.dismiss();//$scope.modalInstance.close() also works I think
};
$scope.doSomething=function(){
//any actions to take place
console.log("Do Something");
}

I had a similar issue, but I managed to fix it by removing the controller inside of the $uibModal.open({])

AngularjS $injector:unpr

I have a following controllers:
/** Calculation controller **/
app.controller('calculationController', ['$scope','$modal','content', function($scope, $modal, content) {
/** data recieved from get request **/
$scope.data = content.data; //promise
/** function to edit data **/
$scope.edit = function(item){
var htmlContents = {
title: 'Edit product',
body: 'Please confirm that you want to edit the product'
}
var modalInstance = $modal.open({
templateUrl : templateBase + 'views/modal/dialog.html',
controller : 'modalInstanceController',
resolve : {
items : function() { return item; },
html : function() { return htmlContents; }
}
});
}
/** function to delete data **/
$scope.trash = function(item){
}
}]);
app.controller('modalInstanceController', ['$scope', '$modalInstance','items','html', function($scope,$modalInstance,items,html) {
$scope.title = html.title;
$scope.body = html.body;
}]);
What I'm trying to accomplish is to open a dialog with contents from 'dialog.html' however once I click the :
<img ng-src="images/icn_edit.png" ng-click="edit(item)" alt="Edit">
$injector:unpr is appearing in console log.
dialog.html contents are :
<div ng-controller="modalInstanceController">
<div class="modal-header">
<h3>{{title}}</h3>
</div>
<div class="modal-body">
{{body}}
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
I know that I'm missing to inject something however after hours of looking at the code I'm unable to locate what...
From what I can observe '$scope', '$modalInstance','items','html' are being injected in modelInstanceController..
Any help appreciated.
thank you

From your dialog.html remove
Ng-controller="modalInstanceController"
It should be plain div and that will do the trick
Your html markup for dialog.html should look like this:
<div>
<div class="modal-header">
<h3>{{title}}</h3>
</div>
<div class="modal-body">
{{body}}
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>