I have one html file.
At that file, I have a button that should open a modal when I click it.
<button ng-click="open(value.Reservation.id)" class="btn btn-default btn-xs" ></button>
and below that button, in the same html file, I have the script.
<script type="text/ng-template" id="myModalContent.html">test</script>
and in the pendingController.js file,
myApp.controller('PendingCtrl', function ($rootScope, $scope, $location, $http, $modal, $log) {
$scope.open = function (id) {
//GET RESERVATION
$http({method: 'GET', url: 'admin/getUpdateReservation/'+ id +'.json'}).
success(function(data, status, headers, config) {
$scope.post = data.data;
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'UpdateReservationCtrl',
resolve: {
data: function () {
$scope.post.status = $scope.status;
$scope.post.locations = $scope.locations;
return $scope.post;
}
}
});
modalInstance.result.then(function (selectedItem) {
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
}).
error(function(data, status, headers, config) {
alert('error');
});
};
})
And I have updateReservationController.js file.
hansApp.controller('UpdateReservationCtrl', function ($rootScope, $scope, $route, $http, $modalInstance, data) {
console.log('6');
})
the console.log('6'); works. But I can't see the modal page...
How can I make my modal works?
So First of all, dont use resolve if you dont wating for a promise...
What docs say to the resolve Key:
Object containing dependencies that will be injected into the
controller's constructor when all the dependencies have resolved. The
controller won't load if the promise is rejected.
It looks like you are using the Modal of AngularStarp (correct me if im wrong).
As they mention in they docs you have to do something like this:
modal = $modal({
controller: function($scope) {},
show: false,
});
and in your success-callback:
modal.$promise.then(modal.show);
Related
We're moving from using angular modal to uibmodal for creating our modals. Previously we accessed our form elements for the template passed in using link
ModalService.showModal({
templateUrl: templateUrl,
controller: controller,
controllerAs: controllerAs,
inputs: {apiMethod: apiMethod, callback: callback, params : params},
link: function(scope, element, attr) {
scope.dismiss = function() {
element.modal('hide');
};
}
This isn't an option with uibmodal without creating a new directive. Is there an easy way to access the DOM at this point? We'd like to take the elements in the DOM (text inputs) and pass them to our chosen apimethod.
$uibModal.open({
templateUrl: templateUrl,
controller: controller,
controllerAs: controllerAs,
resolve: {params: function(){return params;},apiMethod: function(){return apiMethod;}}
});
This is what the controller did previously - the issue is that we no longer have access to the element(s):
Controller:
$scope.params = params;
$scope.close = function (result,form) {
if (result == 'Save') {
var uri = apiMethod + "?accountId=" + $routeParams.accountId;
$http.post(uri, formToKeyValueListJSON($element))
.success(function (data, status, headers, config) {
$uibModalInstance.close({status:'Success', data: data}, 500); // close, but give 500ms for bootstrap to animate
})
.error(function (data, status, headers, config) {
$uibModalInstance.close({status:'Fail', data: data},500);
});
}
};
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
I am using Angular-ui to pop up a modal with a form in it. My code is:
app.controller('NewCaseModalCtrl', ['$http', '$scope','$modal', function ($http, $scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'modal-new-case.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
});
};
}]);
And then I have another controller that is inside the modal-new-case.html template, and I want it to run an httpd request and then close that modal, here is that code:
app.controller('CreateCaseFormCtrl', ['$http','$scope', function($http,$scope) {
$scope.formData = {};
$scope.processForm = function() {
$http.post('http://api.com/proj', $scope.formData).
success(function(data, status, headers, config) {
console.log("success " + data.id);
}).
error(function(data, status, headers, config) {
console.log("Error " + status + data);
});
};
}]);
Okay so inside my modal-new-case.html template, which is loaded when I do:
ng-controller="NewCaseModalCtrl"
I have this HTML:
<div ng-controller="CreateCaseFormCtrl">
<form ng-submit="processForm()">
<button class="btn btn-primary" ng-click="processForm()" >OK</button>
<button class="btn" ng-click="cancel()">Cancel</button>
</form>
</div>
So if you see, what I really want to do is to run that processForm() function, and when it returns with a success, I want to THEN call the function that will close the modal, which I believe "cancel()" would be fine.
But I don't know how to refer to it from the CreateCaseFormCtrl controller.
I appreciate any thoughts and help, and I would like to add that I am very unsophisticated when it comes to Angular, so if this is complicated, please remember that maybe I am not 100% clear on what every single thing in Angular is such as the factories and such. I guess I'm saying I'm very happy with a dirty solution that's fairly simple, since this isn't going to be long-term production programming code.
Step 1: remove the
ng-controller="CreateCaseFormCtrl"
from
<div ng-controller="CreateCaseFormCtrl">
<form ng-submit="processForm()">
<button class="btn btn-primary" ng-click="processForm()" >OK</button>
<button class="btn" ng-click="cancel()">Cancel</button>
</form>
</div>
Step 2: Change
controller: 'ModalInstanceCtrl', => controller: 'CreateCaseFormCtrl'
in
var modalInstance = $modal.open({
templateUrl: 'modal-new-case.html',
controller: 'CreateCaseFormCtrl', //Add here
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
Step 3: In CreateCaseFormCtrl add a service called $modalInstance
app.controller('CreateCaseFormCtrl', ['$http','$scope', '$modalInstance', function($http,$scope, $modalInstance) {
Step 4: Add the close and ok functions
$scope.cancel = function () {
$modalInstance.dismiss();
};
and $modalInstance.close(); in
$http.post('http://api.com/proj', $scope.formData).
success(function(data, status, headers, config) {
console.log("success " + data.id);
$modalInstance.close(); //add here
}).
error(function(data, status, headers, config) {
console.log("Error " + status + data);
});
use $modalInstance.dismiss API
in NewCaseModalCtrl:
controller('NewCaseModalCtrl', ['$scope', '$modalInstance', function ($scope, $modalInstance,
...
$modalInstance.close(data);
You an do it globally like this or from other controllers too:
//hide any open $mdDialog modals
angular.element('.modal-dialog').hide();
//hide any open bootstrap modals
angular.element('.inmodal').hide();
//hide any sweet alert modals
angular.element('.sweet-alert').hide();
I have a view that renders posts it gets from a factory,
my problem is that the view is delayed only after all the posts are rendered.
You can see the video here:
https://www.youtube.com/watch?v=aFHiqrtV10w
The code sample:
as you can see the code has a function "loadPosts", and just after I call this function.
Just for loading the posts.
app.controller('postsPageController', ['$scope', '$ionicModal', 'Posts', 'Comments', '$ionicLoading', 'Cache', '$timeout', 'Security',
function ($scope, $ionicModal, Posts, Comments, $ionicLoading, Cache, $timeout, Security) {
$scope.posts = [];
$scope.loadPosts = function(noCache) {
$http({method: 'POST', url: BloompyService.url()+'api/posts/all'})
.success(function(data) {
$scope.posts = data;
}).error(function(data) {
console.log('error');
});
$scope.init = function () {
$scope.loadPosts(false);
};
$scope.init();
}
I'm trying to open a modal with angularjs.
My route to task list is:
/client/:id/task/list
Its working fine.
Now, i'm trying to show the task info in a modal, above the list.
My route for this is:
/client/:id/task/:id
How can i open the modal above the list view, change the URL, but don't change the view?
I saw a lot of topics about this, but with none solution.
Thanks.
You can specify states you want to show as modal and when handled, return to state you want to. For example;
app.config(function ($stateProvider) {
$stateProvider.state('tasks', {
url: '/tasks',
templateUrl: 'tasks.html',
controller: 'TasksCtrl'
}).state("tasks.show", {
url: "/tasks/:id",
onEnter: function($stateParams, $state, $modal) {
$modal.open({
templateUrl: "show.html",
resolve: {},
controller: function($scope, $state) {
$scope.ok = function () {
$scope.$close();
};
$scope.dismiss = function () {
$scope.$dismiss();
};
}
}).result.then(function (result) {
// $scope.$close
}, function (result) {
// $scope.$dismiss
}).finally(function () {
// finally
return $state.transitionTo("tasks");
});
}
});
});
Related plunker here http://plnkr.co/edit/fCyrlH