We Keep Coding

Bootstrap uib modal with multiple controllers

I am trying to use a bootstrap modal and I am passing the main controller in the $uibModal.open({controller : "mainCtrl"}).
So far its all good now I want to have several tabs in the modal and I want each tab to have its own controller using ng-controller. This is where I am getting the error : [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- tabController
which is expected because it seems we cannot have ng-controller inside uibModalInstance.
Is there an alternate way of achieving this?

It should work for you like in this |- demo fiddle - |- demo plnkr with template files -| I've create for you. Please compare this solution carefully with yours. You can have as many ng-controller defined in your uibModal template as you want. Also ensure that your controller is a part of the same module.
View
<div ng-app="ui.bootstrap.demo">
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header" ng-controller="ModalDemoSecondCtrl">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body" ng-controller="ModalDemoThirdCtrl">
Demo form submit:
<br/>
<form ng-submit="ok()">
<div class="input-group animated fadeIn">
<input type="text" class="form-control finderBar" ng-model="searchTerm" placeholder="City, State..." autofocus>
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="ok()">Go!</button>
</span>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
</div>
</div>
AngularJS application
angular.module('ui.bootstrap.demo', ['ui.bootstrap'])
.controller('ModalDemoCtrl', function($rootScope, $scope, $log, $uibModal) {
$scope.open = function(size, template) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: template || 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size
});
};
$scope.toggleAnimation = function() {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
}).controller('ModalDemoSecondCtrl', function($rootScope, $scope, $log, $uibModal) {
}).controller('ModalDemoThirdCtrl', function($rootScope, $scope, $log, $uibModal) {});
angular.module('ui.bootstrap.demo')
.controller('ModalInstanceCtrl', function($scope, $uibModalInstance) {
$scope.ok = function() {
$uibModalInstance.dismiss('cancel');
};
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
});

How can I develop a popup that open on a button click (Angularjs)

Any one can refer me a link or a demo of code for developing a popup using angularjs.
I have tried the following code but it's not working.
var myApp = angular.module('myApp', ['ngRoute', 'ngMap', 'ui.bootstrap']);
myApp.config(function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when("/", {
templateUrl: "views/home.php",
controller: 'PopupDemoCont'
})
.when("/profile.php", {
templateUrl: "views/profile.php"
})
.otherwise({
redirectTo: "/"
});
});
myApp.controller("ImageController", ["$scope", function($scope) {
$scope.logoimage = "images/logo.png";
$scope.bgtextimage = "images/bgtextimage.png";
}]);
myApp.controller("PopupDemoCont", ["$scope", "$modal", function($scope, $modal) {
$scope.open = function() {
console.log('opening pop up');
var modalInstance = $modal.open({
templateUrl: 'views/popup.php',
controller: 'PopupCont'
});
};
}]);
myApp.controller("PopupCont", ["$scope", "$modalInstance", function($scope, $modalInstance) {
$scope.close = function() {
$modalInstance.dismiss('cancel');
};
}]);
In bellow html, I set ng-controller but it isn't working.
<div class="book_div">
<div class="book_content">
<p id="book-text">Facing Immigration
<br> Problems?
</p>
<p>Helpful Guid To Navigate Your Case</p>
<div class="hidden-sm hidden-xs"><img ng-src="{}" class="center-block img-responsive">
</div>
<a class="submit-button book_btn" ng-click="open()">Free download</a>
</div>
</div>
It is giving the Error:
[$injector:unpr].

You can use uibModalinstance.
On button click call the function open.
code for open function:
$scope.open = function(uuid,name){
var instance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'common/common/partials/delete-
confirm.tpl.html',
controller: function ($uibModalInstance,
$scope) {
$scope.name = Name;
$scope.icon = "fa-cogs";
$scope.description = "Yo have opened uib
Popup"
$scope.delete = function () {
$uibModalInstance.close($scope.deleteValue);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
}
});
}
I have used this code for deleting my record. You can use in your way, if you want to take response of Popup you can use:
instance.result.then(function (option) {
// Your code here
}, function () {
console.log('Modal dismissed at: ' + new Date());
});
HTML template will be like:
<div class="modal-header gray_background">
<h4><b>Permanently Delete - <i class="fa {{icon}} folderIcon" aria-hidden="true"></i> {{name}} </b></h4>
</div>
<div class="modal-body">
<span data-ng-bind-html="description"></span>
<center style="margin-top: 10px;">
<div>Type "delete" to confirm
<input type="text" class="input" ng-model="deleteValue" required />
</div>
</center>
</div>
<div class="modal-footer gray_background">
<button class="btn btn-default" type="button" ng-click="cancel()">Cancel</button>
<button class="btn btn-danger" type="button" ng-click="delete()">Delete</button>
</div>
Hope this would be helpful, if you have any further query you can ask.
Thanks!

Change ng-show value in other controller

I'm trying to show and hide a div using ng-show. It's a navbar that I want to show only in some views.
I have a controller which "controls" that div. And in other controller I want to edit this ng-show value in order to hide or show the div (navbar).
I tried different things as using a $rootScope, a timeout, an $apply, a factory... but nothing works.
So I'm asking here if anyone could help me.
(Sorry for my English)
This is my html and js codes (last edit code)
<div id="main">
<!-- Aquí inyectamos las vistas -->
<div ng-controller="appCtrl" ng-show="isLogged" class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="#/">Aula Virtual</a> </div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="text-align: right">
<li class="active">Home</li>
<li>Users</li>
<li>Operaciones</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="connect">
<div class="container">
<p>
Aula Virtual para profesorado y alumnos de la universidad
</p>
</div>
</div>
</div>
<div ui-view></div>
</div>
I tried a (ng-show="isLogged==false") too.
The controller of the div:
.controller('appCtrl', function($scope, $rootScope) {
console.log($scope.isLogged); //---> this shows undefined
});
The controller where I want to edit the isLogged value:
cities2.controller('userCtrl',['rootScope', '$scope', '$state','$http','md5', function($rootScope, $scope, $state, $http, md5) {
$rootScope.$apply(function(){
$rootScope.isLogged = true;
});
Thanks for the help!

It's good practice to use services to share data between controllers.
cities2.controller('appCtrl', ['$scope', 'LoggedStatus', function($scope,LoggedStatus) {
$scope.LoggedStatus = LoggedStatus;
}]);
cities2.controller('userCtrl', ['$scope', 'LoggedStatus', function($scope,LoggedStatus) {
$scope.LoggedStatus = LoggedStatus;
}]);
cities2.service('LoggedStatus', function() {
return {
isLogged: false
}
});
Changing the value of $scope.LoggedStatus.isLogged in either controller will change the value in both.

In your appCtrl controller, do $scope.isLogged=0. If you change this value to 1, the block will be visible else it will be hidden.
app.controller('appCtrl', function($scope) {
$scope.isLogged=0;
})
Refer to the plunker below:
https://plnkr.co/edit/d3q3QwA9k5f6ewXbqZ3M?p=preview

Well, finally I found the solution. I put this if can help someone:
I put a .run in the appCtrl where I initialize the ng-show:
.run(function ($rootScope) {
$rootScope.isLogged = false;
});
and now, when I put a true value in the other controller it works, and the navbar appears.
cities2.controller('userCtrl',['$rootScope', '$scope', '$state','$http','md5','$sessionStorage', function($rootScope, $scope, $state, $http, md5, $sessionStorage) {
$rootScope.isLogged=true;
}]);

why is my button working only from specific URL

My button is located in two partial templates exactly the same way. However it's not working in the home template.
I want to make the function deleteNote() work. When I am at a specific note's url the button works, but when I am at the home template it just won't. Does anybody have a clue why?
note.html
<div class="col-lg-3" ng-controller="mainCtrl">
<div class="list-group" ng-repeat="note in notes">
<a href="#note/{{note.id}}" class="list-group-item" style="max-height: 90px; overflow: hidden">
{{note.title}}
<p style="text-align: justify;" ><small>{{note.body}}</small></p>
</a>
<button ng-click="deleteNote(note)" class="btn btn-default btn-xs" style="float: right;">Delete</button>
</div>
</div>
home.html exactly the same as you can see
<div class="col-lg-3" ng-controller="mainCtrl">
<div class="list-group" ng-repeat="note in notes">
<a href="#note/{{note.id}}" class="list-group-item" style="max-height: 90px; overflow: hidden">
{{note.title}}
<p style="text-align: justify;" ><small>{{note.body}}</small></p>
</a>
<button ng-click="deleteNote(note)" class="btn btn-default btn-xs" style="float: right;">Delete</button>
</div>
</div>
notesCtrl.js
angular.module('theNotesApp')
.controller('notesCtrl', [
'$scope',
'notesFactory',
'note',
'$stateParams',
'$state', function($scope, notesService, note, $stateParams, $state) {
$scope.note = note;
$scope.title = note.title;
$scope.body = note.body;
$scope.updateNote = function() {
notesService.update($stateParams.id, {title: $scope.title, body: $scope.body});
notesService.getAll();
};
$scope.deleteNote = function(note) {
notesService.delete(note.id);
$state.go('home');
notesService.getAll();
};
}])
mainCtrl.js
.controller('mainCtrl',['$scope', 'notesFactory', function($scope, notesService){
$scope.notes = notesService.notesObjectInService;
notesService.getAll();
$scope.addNote = function(){
if ($scope.title === "" ) {
return;
}
notesService.create({
title: $scope.title,
body:$scope.body
});
$scope.title= '';
$scope.body= '';
};
}])

deleteNote is defined on scope of notesCtrl not on mainCtrl. You will need to create a method deleteNote on mainCtrl. Here is a demo.

UI Bootstrap Modal popup not working correctly with AngularJS

My code is like this
angular.module('RateRequestApp.controllers', []).controller('ReadOnlyController', [ '$scope', '$modal',
function($scope, $modal) {
var data = [];
data.push("first message");
this.openReprintModal = function() {
var modalInstance = $modal.open({
templateUrl: 'ReprintModal.html',
controller: 'ModalInstanceCtrl',
resolve: {
items: function() {
return data;
}
}
});
};
this.openReprintModal();
}
]);
angular.module('RateRequestApp.controllers').controller('ModalInstanceCtrl', function($scope, $modalInstance) {
$scope.ok = function() {
$modalInstance.close();
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
});
<div id="RateRequestApp" class="content" ng-app='RateRequestApp' ng-controller="ReadOnlyController">
<script type="text/ng-template" id="ReprintModal.html">
<div class="modal-header">
<h3 class="modal-title">Check this out</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<span>{{ item }}</span>
</li>
</ul>
</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>
</script>
</div>
All works Okay Except there is no message shown at the body of modal. Apparently everyhting works except `
<li ng-repeat="item in items">
<span>{{ item }}</span>
</li>`
This part is not working.Can any one point out any possible reason.
Note: I am using this one for model :http://angular-ui.github.io/bootstrap/

You have to inject items object to your ModalInstanceCtrl like this:
angular.module('RateRequestApp.controllers')
.controller('ModalInstanceCtrl', function($scope, $modalInstance, items) {
$scope.items = items;
...
});
And then you are able to access it in your view just like you have it now
<li ng-repeat="item in items">
<span>{{ item }}</span>
</li>