I have mainly to open an angular popup window based on a template.
But I need to obtain the data from an ajax call.
The Module sample explains how to use a template, but I am confused where to place an ajax call to obtain the items, like follows (the snippet is not working, but is the same as the sample):
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl',
function($scope, $uibModal, $log) {
//
// need to obtain these items from an AJAX/GET call
//
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function(size) {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function() {
return $scope.items;
}
}
});
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">...</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">...</li>
</ul>
</div>
<div class="modal-footer">...</div>
</script>
<button type="button" ng-click="open()">Open me!</button>
</div>
I have a link that return JSON data, I'd modify the function like this:
$scope.open = function(size, jsonLink) {
var modalInstance = $uibModal.open({
// ?????
templateJsonUrl: jsonLink,
// ?????
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function() {
return $scope.items;
}
}
});
Just make a request with a http service, and assign result to $scope.items when it will be resolved. A digest cycle will make bindings. Don't forget to inject http service itself.
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl',
function($scope, $http, $uibModal, $log) {
$http
.post('/your_pass_to_json.json', data)
.then(function(data) {
$scope.items = data.items;
});
$scope.open = function(size) {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function() {
return $scope.items;
}
}
});
Here is plunker, but I've assigned $scope.items in the promise rejection because could not mock the XHR request.
UPDATE
Or you can put modal opening in the xhr callback:
$scope.open = function(size) {
$http
.post('/your_pass_to_json.json', data)
.then(function(data) {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function() {
return data.tiems;
}
}
});
});
}
In this case, the modal will always be opened with a delay. I would suggest you to make an xhr request once the controller was initialized, and make a verification on the opening event: if xhr was already fired before, take items from $scope, if it wasn't, cancel previous request and make a new one.
#Lazarev's answer is correct, but additionally in Angular, you have to make ajax calls from angular services and directly inject to controllers.
like this;
AngularJS Ajax Call in Service
Related
I am using routeProvider to route to "views/userspace.html" which uses "UserspaceController"
The "views/userspace.html" recognizes this controller and makes request a $http request. This request works file and i can see values in "views/userspace.html" (inside ng-repeat). However, in the same controller i have defined $scope.videoClick function which does not seems to work. Any idea why?
var application = angular.module("tss.application",
[
"ngRoute",
"ui.bootstrap"
]);
application.config(function($routeProvider)
{
$routeProvider
.when("/", {
templateUrl : "views/main.html",
controller: "LoginController"
})
.when("/files", {
templateUrl : "views/userspace.html",
controller: "UserspaceController"
});
});
userspace_controller.js
angular.module('tss.application').controller("UserspaceController",
function($scope, $log, $http, $uibModal)
{
$http(
{
url : "/dirlist",
method : "GET",
}).then(function successCallback(response)
{
$scope.lists = response.data;
},
function errorCallback(response)
{
window.alert("Dir list could not be get");
});
$scope.videoClick = function()
{
$log.info('received.');
$uibModal.open(
{
templateUrl: '/views/content.html',
});
};
});
userspace.html
<li ng-repeat="list in lists" ng-click="videoClick(list.src)">{{list.name}}</li>
Change your function to accept a parameter
$scope.videoClick = function(val) {
$log.info('received.');
$uibModal.open({
templateUrl: '/views/content.html',
});
};
Or change the function in HTML
<li ng-repeat="list in lists" ng-click="videoClick()">{{list.name}}</li>
It's because in your;
$scope.videoClick = function()
{
$log.info('received.');
$uibModal.open(
{
templateUrl: '/views/content.html',
});
};
You have a comma which isn't needed, which makes the function throw an error because it's expecting another property.
Also if you're using the variable you pass through your HTML, you should use Sajeetharan's answer.
I am using Modal (ui.bootstrap.modal) and I have seen 2 different implementations for this:
1. Declare the controller modal instance in the modal declaration
/* 1 file ModalDemoCtrl.js*/
angular.module('ui.bootstrap.demo')
.controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: function(){
// stuff
},
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
});
2. Declare the controller modal instance separate from the parent controller
/* first file ModalDemoCtrl.js*/
angular.module('ui.bootstrap.demo')
.controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller:'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
});
/* second file ModalInstanceCtrl.js*/
angular.module('ui.bootstrap.demo')
.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {
//stuff
});
Questions
a) Which implementation is suitable for a large angular web application ?
b) With implementation 2 will I have dependency issues later on, because of the members that will be resolved and passed to the controller as locals (resolve (Type: Object)) ?
c) With implementation 1 will I increase the number of code lines in my js file ( the controller) and will be harder to understand the logic ?
I am trying to hook up an Angular Bootstrap modal (pop-up) but it's giving me either "templateUrl" not found error, or this error: Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=ModalInstanceCtrl&p1=not%20a%20function%2C%20got%20undefined
I just want some theoretical suggestions on why that would be the case. I have tried a lot of things: it's all properly hooked up, all the spelling matches, etc, etc.
$modal is being used in the controller with other functions as well, so it's all being injected.
Angular Documents provide a suggestion that when you get this error it is possible that you have a controller being injected into another controller. Which is exactly what was happening with my attempt to add a modal as their box solution:
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
controller: 'ModalInstanceCtrl' MUST BE removed from your modal function if you're adding it to an existing controller, otherwise it will all go to ... you know where.
Can be as simple as the controller not existing on your module.
I forgot to add the code for the modal controller :( when I first tried it in my project
This controller is about 3 controllers deep in my project (make sure your using "controller AS cntlr" style) so embedding wasn't a problem for me.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
I see many posts about posting many complicated things to ui-bootstrap modals, but I just want to pass a simple parameter so that I might use it to display different content in the dialog.
For example, I have the main document which has MyDocumentController as mydoc
In MyDocumentController is a function such as
_this.modals = {
inviteUser: function() {
$modal.open({
animation: true,
templateUrl: 'modules/templates/modals/modal-invite-user.html',
controller: 'UserInviteModalController as invite',
size: 'lg'
});
}, ...
And I call it in the main document like so, here is where I want to pass the param from:
<a href="" ng-click="users.modals.inviteUser(returningUser)">
And here is the controller for the modal:
(function() {
'use strict';
angular.module('mymodule')
.controller('UserInviteModalController', function($log, $modalInstance, toastr) {
var _this = this;
_this.someVar = HERE'S WHERE I WANT TO GET THE VALUE returningUser FROM THE NG-CLICK
_this.inviteDialog = {
close: function() {
$modalInstance.close();
},
resendInvite: function() {
toastr.success('A new invite has been sent.');
$modalInstance.close();
}
};
});
})();
What is the process for passing the simple param to the dialog's controller?
Try using resolve:
_this.modals = {
inviteUser: function(returningUser) {
$modal.open({
animation: true,
templateUrl: 'modules/templates/modals/modal-invite-user.html',
controller: 'UserInviteModalController as invite',
size: 'lg',
resolve: {
returningUser: function() {
return returningUser;
}
}
});
}, ...
And then inject it into your controller:
angular.module('mymodule')
.controller('UserInviteModalController', function($log, $modalInstance, toastr, returningUser) {
var _this = this;
_this.someVar = returningUser;
I'm trying to pass an object into a modal dialog in a bootstrap/angularJS using the code below. I did this in the style of the answer given at AngularJS UI Bootstrap modal is unable to perform functions from scope. When the modal form is supposed to open from a call to editGroup(), I get the following error:
Error: [$injector:unpr] Unknown provider: selGroupProvider <- selGroup
var EditGroupModalController = function ($scope, $modalInstance, selGroup) {
$scope.user = $sessionStorage.user;
$scope.selGroup = selGroup;
$scope.closeModal = function () {
$modalInstance.close();
};
};
$scope.editGroup = function (selGroup) { // "selGroup" receives the current Group object from $scope.groupList[]
$modal.open({
templateUrl: 'app/views/administration/advanced/editgroup.html',
controller: ['$scope', '$modalInstance','$modal','$sessionStorage','advancedService','selGroup', EditGroupModalController],
size: 'lg',
windowTemplateUrl:'app/views/partials/modaltemplatedraggable.html',
backdrop:'static',
resolve: {
item: function () {
return selGroup;
}
}
});
};
The official description of this error is here; however, I do not understand why I am receiving this error. Any help with this would be greatly appreciated.
Your controller's dependencies list doesn't match controller's function definition: in $modal.open you've listed six dependencies, while in function only three are present.
Dependencies are injected by resolve keys - in your case the key is item.
Necessary changes to your code in order to make it work:
Replace (1)
var EditGroupModalController = function ($scope, $modalInstance, selGroup)
with
var EditGroupModalController = function ($scope, $modalInstance, $modal, $sessionStorage, advancedService, selGroup)
And replace (2)
resolve: {
item: function () {
With
resolve: {
selGroup: function () {
You should name the variable in the resolve as 'selGroup' instead of 'item' so that it can be correctly injected.
Also, the names of the declared dependencies should match the function definition. I put together this simple demo.
angular.module('test', ['ui.bootstrap']).controller('TestController', function($scope, $modal) {
var sel = {name: "A group"};
var EditGroupModalController = function($scope, $modalInstance, selGroup) {
$scope.selGroup = selGroup;
$scope.closeModal = function() {
$modalInstance.close();
};
};
$scope.editGroup = function(selGroup) { // "selGroup" receives the current Group object from $scope.groupList[]
$modal.open({
template: '<div>Test {{selGroup.name}}</div>',
controller: ['$scope', '$modalInstance', 'selGroup', EditGroupModalController],
size: 'lg',
backdrop: 'static',
resolve: {
selGroup: function() {
return sel;
}
}
});
};
});
http://plnkr.co/edit/ec1PjkDZtf4yqINONnX5?p=preview