angular-ui-modal]1 for create my site and I want to show my modal automatically when the user enter in my webpage. With ng-click is easy , I have this code:
var app = angular.module('app', ['ui.bootstrap']);
app.controller('HomeCtrl', ['$scope', '$modal', function($scope, $modal) {
$scope.openModal = function(data) {
var modalInstance = $modal.open({
templateUrl: 'modals/register.html',
resolve: {
data: function() {
return data === null ? {} : data;
}
}
});
};
}]);
But I do not know how trigger the modal when load page.
Any help? Please
You just have to call the function when the controller is loaded:
var app = angular.module('app', ['ui.bootstrap']);
app.controller('HomeCtrl', ['$scope', '$modal', function($scope, $modal) {
$scope.openModal = function(data) {
$scope.blurred = "blurredopen";
var modalInstance = $modal.open({
templateUrl: 'modals/register.html',
resolve: {
data: function() {
return data === null ? {} : data;
}
}
});
};
$scope.openModal(); // <-- Call it
}]);
Demo on JSFiddle
Related
I have correctly setup my angular modal, now I want to pass my modal data back to my controller. I am using the below code.
First my controller calls my factory service that creates the modal popup:
$scope.mymodal = myService.openModal(data);
My service is as:
function openModal (data) {
var uData = null;
if (data) {
uData = {
userName : data.setName,
gender : data.gender
}
}
var modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: 'ModalController',
backdrop: 'static',
keyboard: false,
resolve: {
data: function () {
return uData;
}
}
});
modalInstance.result.then(function () {
return;
}, function () {
});
return modalInstance;
}
See my jsfiddle here for this: http://jsfiddle.net/aman1981/z20yvbfx/17/
I want to pass name & gender that i select on my modal back to my controller, which then populates my page. Let me know what is missing here.
I updated AboutController, ModalController and myService with comments.
Main idea is return data from ModalController with close method. Fiddle
var app = angular.module('myApp', ['ui.router','ui.bootstrap']);
app.controller('IndexController', function($scope, $log) {
});
app.controller("AboutController", ['$location', '$state', '$scope', '$filter','myService', function($location, $state, $scope, $filter, myService) {
var data = "";
$scope.mymodal = myService.openModal(data);
// after modal is close, then this promise is resolve
$scope.mymodal.then(function(resp){
console.log(resp);
})
}]);
app.controller("ModalController", function($location, $state, $scope, $filter, $modalInstance) {
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
$state.go('index');
};
$scope.done = function () {
// return data on close modal instance
$modalInstance.close({genger:$scope.gender,userName:$scope.userName});
};
});
app.factory('ApiFactory', function ($http) {
var factory = {};
return factory;
});
app.factory("myService",[ "$state", "$modal", "ApiFactory",
function ($state, $modal, factory) {
var service = {
openModal: openModal
};
function openModal (data) {
var uData = null;
if (data) {
uData = {
userName : data.setName,
gender : data.gender
}
}
var modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: 'ModalController',
backdrop: 'static',
keyboard: false,
resolve: {
data: function () {
return uData;
}
}
});
// on close, return resp from modal
modalInstance.result.then(function (resp) {
return resp;
}, function () {
});
// return modal instance promise
return modalInstance.result;
}
return service;
}
]);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/index');
$stateProvider
.state('index', {
url: '^/index',
templateUrl: 'index.html',
controller: "IndexController"
})
.state('about', {
url: '^/about',
templateUrl: 'about.html',
controller: "AboutController"
})
}]);
How to set new value to modal content when modal is open/active?
Here is the sample code.
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log, $timeout) {
$scope.test = "test variable"
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
test: function () {
return $scope.test;
}
}
});
$timeout( function(){
$scope.test = "Hello World!";
}, 5000 );
};
var ModalInstanceCtrl = function ($scope, $modalInstance, test) {
$scope.test = test;
$scope.$watch('test',function (newValue, oldValue) {
$scope.test = test;
});
};
In parent controller, i init the modal 1st with "test variable" and after timeout(5 seconds), i want the modal variable change to "Hello World" without close the modal.
can test here
Use $timeout function inside ModaInstanceCtrl and then change the scope value of variable accordingly. Here is the sample code:
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.test = "test variable"
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
scope: $scope,
resolve: {
test: function () {
return $scope.test;
}
}
});
};
var ModalInstanceCtrl = function ($scope, $modalInstance, $timeout, test) {
$timeout(function(){
$scope.test = "variable"
}, 2000);
};
http://plnkr.co/edit/f1zhkWH6aEtZDoKv8egO?p=preview
you can directly bind controller scope to modal something like
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
scope: $scope
});
Here is working plunker
I have a $scope.selected ( a modal that return a value selected ) to be created in ModalInstanceCtrl controller and used in displayValue controller,How Can I spent the first controller value at the second,
app
.controller('DemoCtrl', function ($scope, $modal) {
console.log("in angular");
$scope.selected = null;
$scope.open = function() {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: 'lg'
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
});
};
})
.controller('ModalInstanceCtrl', function ($scope, $modalInstance) {
$scope.setSelectedSegment = function (value) {
$scope.selected = value;
$modalInstance.close($scope.selected);
};
})
.controller('displaySelected', function ($scope) {
// get selected from ModalInstanceCtrl controller
$scope.displayValue= $scope.selected;
};
})
You need to create angularjs service for this purpose and then include the service where you need to access its value.
var app = angular.module("MyApp", []);
app.factory("UserService", function() {
var users = ["Peter", "Daniel", "Nina"];
return {
all: function() {
return users;
},
first: function() {
return users[0];
}
};
});
app.controller("MyCtrl", function($scope, UserService) {
$scope.users = UserService.all();
});
app.controller("AnotherCtrl", function($scope, UserService) {
$scope.firstUser = UserService.first();
});
I'm trying to pass a value to the Popup Controller, but is only passing if i insert this "havePermissions" in the controller but gives this error https://docs.angularjs.org/error/$injector/unpr?p0=havePermissionsProvider (Unknown provider: havePermissionsProvider)
if i remove this "havePermissions, i dont have the error, but dont pass the value to the modal controller (is undefined the value)
Modal Open
$scope.open = function (size) {
var modalScope = $rootScope.$new();
modalScope.modalInstance = $modal.open({
templateUrl: 'Views/Common/participants.html',
controller: 'ModalInstanceCtrlPartic',
size: size,
scope: modalScope,
resolve: {
havePermissions: function () {
return $scope.havePermissions;
}
}
});
modalScope.modalInstance.result.then(function () {
});
};
Modal Controller
angular.module("participants.controller", ['ui.bootstrap'])
.controller("ModalInstanceCtrlPartic", ["$scope", "$http", "$location",
"$routeParams", "UserService","havePermissions","logger",
function ($scope, $http, $location, $routeParams, UserService,
havePermissions,logger) {
var page = $location.path().split('/')[1];
$scope.havePermissions = havePermissions;
$scope.ID_Event = page == "events" ? $routeParams.eventId : null;
$scope.ID_UserGroup = page == "groups" ? $routeParams.groupId : null;
$scope.page = page;
$scope.model = {};
UserService.GetParticipants($routeParams.groupId, $routeParams.eventId).then(function (response) {
$scope.model = response.data;
}, function (e) {
logger.logError("Ocorreu um erro, tente novamente.!");
});
$scope.emailList = [];
$scope.ok = function (list) {
//envia email
$scope.modalInstance.close('');
};
$scope.cancel = function () {
$scope.modalInstance.close('');
};
}]);
$modal.open method should not go inside the newly created scope.
Keep var modalInstance = $modal.open({//init code})
Modal code will be changed as follows.
$scope.open = function (size) {
var modalScope = $rootScope.$new();
var modalInstance = $modal.open({
templateUrl: 'Views/Common/participants.html',
controller: 'ModalInstanceCtrlPartic',
size: size,
scope: modalScope ,
resolve: {
havePermissions: function () {
return $scope.havePermissions;
}
}
});
modalInstance.result.then(function () {
});
};
Here is updated plunkr not exactly the same.
Hope this is helpful to you.
I'd like to have my Angular Ui Modal controller/object declared outside
it's triggering controller (& in another file), without polutting the
global namespace.
Is this possible? Is it possible to declare the modal controller
like a regular controller and somehow pass parameters in (from my
trigger controller)?
I currently have: (which ain't cool)
(function () {
TriggeringCtrl.$inject = ['$scope', 'htmlClient', 'apiCall', '$timeout', '$modal', 'utility'];
function TriggeringCtrl($scope, htmlClient, apiCall, $timeout, $modal, utility) {
};
app.controller('TriggeringCtrl', TriggeringCtrl);
var ModalCtrl = function ($scope, $modalInstance, node, apiCall, utility) {
}
});
You have example here which is not global:
http://plnkr.co/edit/fCfvcnwP9JSHbX5L2Vuu?p=preview
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('ModalDemoCtrl', function ($scope, $modal, $q, $timeout) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.ok = function () {
$modalInstance.close('item');
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
items: function () {
var p = $q.defer(); /// simulate data
$timeout(function(){
p.resolve(['item1', 'item2', 'item3']);
});
return p.promise.then(function(data){
return data;
});
}
}
});
};
});