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();
Related
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);
I have a problem here, whenever I am clicking the button which is inside the component, I see that I am making the $http call and I don't get the response in the console, but in browser I see the call is made.
It consoles the data only when I uncomment the $timeout function.
JS
var app = angular.module('myApp', []);
app.controller('mainCtrl', [$scope, $http, $timeout, function($scope, $http, $timeout) {
$scope.navigate = function () {
$scope.getStats();
}
$scope.getStats = function () {
//$timeout(function () {
$http
.get('/scripts/controllers/fda/appSvc.json')
.then(function (response) {
console.log(response.data);
}, function (error) {
console.log(error);
})
//}, 0)
};
$scope.detailedTableCtrl = {
navigate: $scope.navigate
}
}]);
app.component("myBox", {
bindings: {
'detailedTableCtrl': '='
},
controller: function($element) {
},
controllerAs: 'myBox',
templateUrl: "/template",
transclude: true
})
HTML
<div ng-app="myApp" ng-controller="mainCtrl">
<my-box detailed-table-ctrl="detailedTableCtrl"></my-box>
</div><!--end app-->
<!--mybox component-->
<button class="btn btn-default btn-sm" ng-click="myBox.detailedTableCtrl.navigate()">
<span class="glyphicon glyphicon-chevron-left"></span>
<span>Back</span>
</button>
As #Amy pointed out i don't see $http service injected. Also please do use service to consume data and inject the service in controller. Your controller shouldn't worry about calling/consuming data.
<!-- Controller to get data from the Service or Factory ( pay attention to service injection here ) -->
app.controller('mainCtrl', ['$scope', 'dataService', function($scope,dataService) {
dataService.getData().then(function(response) {
$scope.response = response.data;
}, function(error) {
$scope.error = error;
$scope.response = [];
});
});
<!-- Factory to handle your data from REST or JSON -->
(function () {
"use strict";
app.factory("dataService",['$http', function($http){
function getData (){
return $http.get('/scripts/controllers/fda/appSvc.json');
}
return {
getData : getData
};
}]);
})();
I have 2 directives in one page. The first one works fine, but the second one not working.
This is my Code:
HTML
<body class="login" ng-app="Login">
<div ng-controller="HttpLoginController">
<wrongdetails></wrongdetails>
<loading></loading>
<input type="submit" ng-click="LoginUser()" value="Login" />
</div>
</body>
JS
var app = angular.module("Login", [])
app.controller("HttpLoginController", function($scope,$http){
$scope.LoginUser = function(){
$scope.loading = true;
var data = [];
var config = {}
$http.post('Mylink', data, config)
.success(function (data, status, headers, config) { $scope.loading = false;})
.error(function (data, status, header, config) {$scope.wrongdetails = true; });
};
});
//Directives
app.directive('loading', function () {
return {
restrict: 'E',
//replace:true,
template: '<div id="loading"> <div class="progress-line"></div><br/> </div>',
link: function (scope, element, attr) {
scope.$watch('loading', function (val) {
if (val)
$(element).show();
else
$(element).hide();
});
}
}
})
app.directive('wrongdetails', function () {
return {
restrict: 'E',
replace:true,
template: '<div class="alert alert-danger display-hide"><button class="close" data-close="alert"></button><span> Error. </span></div>',
link: function (scope, element, attr) {
scope.$watch('wrongdetails', function (val) {
if (val)
$(element).show();
else
$(element).hide();
});
}
}
})
But The second Directive never show.
What I am doing wrong?
Sorry for my mistake. I forget to copy paste the directives.
I think now is ok
Remove the following line in your second directive:-
replace:true ,
The reason with the explanation is already available. Refer this link Explain replace=true in Angular Directives (Deprecated)
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 have a question for all you AngularJs gurus out there. I am attempting to create modal wherein a user can submit files for upload. I have most of the problem sorted, however, I seem to be running into issues concerning scope. The technologies I am using are Angularjs, Angular UI Bootstrap and a custom file model directive.
I have a custom fileModel directive which on file selection updates the scope:
app.directive('fileModel', ['$parse', function($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function() {
scope.$apply(function() {
modelSetter(scope, element[0].files[0]);
});
});
}
}
}]);
I use UI bootstrap to create the modal as per the documentation (http://angular-ui.github.io/bootstrap/#/modal). Please note the file-model="file" directive in the input field, this is what I am trying to access.
<div ng-controller="ModalDemoCtrl">
// Button to open model
<button class="btn btn-default" data-ng-click="open()">Upload File</button>
// Simple Form in model
<script type="text/ng-template" id="myModalContent.html">
<form name="form.myForm" class="form-horizontal" data-ng-submit="addFile()" role="form" novalidate>
<div class="modal-header">
<h3 class="modal-title">Upload File</h3>
</div>
<div class="modal-body">
<div class="form-group">
<label for="file" class="col-sm-2 control-label">Input File</label>
<div class="col-sm-10">
<input type="file" name="file" file-model="file">
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</script>
</div>
Lastly I have the controller(s), again as per the Bootstrap UI documentation. Please note where I try to access $scope.file.
app.controller('ModalDemoCtrl', ['$scope', '$http', '$modal', function ($scope, $http, $modal) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
$http: function () {
return $http;
}
}
});
modalInstance.result.then(function () {
// do something
}, function () {
// do something
});
};
}]);
var ModalInstanceCtrl = function ($scope, $modalInstance, $http) {
$scope.addFile = function() {
var formData = new FormData();
formData.append('file', $scope.file);
$http.post(
'/valid/ajax/url', formData, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}).success(function(data, status, headers, config) {
// do something on success
});
);
};
I know there are some issues with regards to scope within modals when using angular UI bootstrap... unfortunately I am not experienced enough to find a solution. Currently, I am unable to access the file a user selects to be sent via ajax. Please help. Thanks.
I saw that the variable "$scope.file" is not being set, it stays undefined. Therefore you can't post the file. An easy way to share data between controllers (you have two, the modal controller and you parent controller) is using a service or factory. Check documentation if you are not sure. Then you can change the save the file via service/factory and use it in both controllers.
First of all the service which just contains a getter and a setter:
app.service('fileService', function () {
var file;
var fileService = {};
fileService.getFile = function () {
return file;
};
fileService.setFile = function (newFile) {
file = newFile;
};
return fileService;
});
You can then use the service via dependency injection on the directive and the controller:
app.directive('myFileUpload', function (fileService) {
return function (scope, element) {
element.bind('change', function () {
fileService.setFile(element[0].files[0]);
});
}
});
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, $http, fileService) {
$scope.addFile = function () {
var file = fileService.getFile();
console.log(file);
$http.post(
'http://posttestserver.com/post.php', file, {
transformRequest: angular.identity,
headers: {'Content-Type': file.type}
}).success(function (data, status, headers, config) {
console.log(data);
});
};
});
I created a fiddle so you can test it there. The file is outputted on the console. For testing the post I used http://posttestserver.com/post.php
http://jsfiddle.net/dz5FK/