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
Related
From controller1 I'm opening a modal like this:
angular.module('myApp').controller('controller1', ['$scope', '$uibModal', function($scope, $uibModal) {
$scope.openFirstModal = function() {
var modalScope = $scope.$new();
var modalInstance = $uibModal.open({
templateUrl: 'views/modal1.html',
controller: 'modal1Controller',
scope: modalScope,
resolve: {},
size: 'lg'
});
modalScope.uibModalInstance = modalInstance;
};
}]);
Then, I'm opening a nested modal like this:
angular.module('myApp').controller('modal1', ['$scope', '$uibModal', function($scope, $uibModal) {
$scope.openSecondModal = function() {
// Open nested modal
var modalScope = $scope.$new();
var modalInstance = $uibModal.open({
templateUrl: 'views/modal2.html',
controller: 'modal2Controller',
scope: modalScope,
resolve: {},
size: 'lg'
});
modalScope.uibModalInstance = modalInstance;
// Close this modal
$scope.uibModalInstance.dismiss('cancel');
};
}]);
But that last part:
// Close this modal
$scope.uibModalInstance.dismiss('cancel');
...is provoking problems in the nested modal. Nothing works in my nested modal:
angular.module('myApp').controller('modal2', ['$scope', '$uibModal', function($scope, $uibModal) {
$scope.test = function() {
console.log("test");
};
}]);
If I remove the problematic piece of code, the nested modal works fine.
How can I close the first modal without making the nested modal to fail?
Ah, just found the problem.
I changed this:
// Open nested modal
var modalScope = $scope.$new();
With this:
// Open nested modal
var modalScope = $rootScope.$new();
That way the nested modal does not rely on his parent.
The parent can die and the child will continue living
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
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;
});
}
}
});
};
});
Instead of defining the controller for my modal instance like this:
var ModalInstanceCtrl = function ($scope, $modalInstance, items) { /*ctrl-code-here*/ };
I want to define it using Module.Controller() syntax:
angular.module('MyModule', ['ui.bootstrap'])
.controller('ModalInstanceCtrl', ['$scope', '$modalInstance', 'items', function ModalInstanceCtrl($scope, $modalInstance, items) { /*ctrl-code-here*/ }])
.controller('ModalDemoCtrl', ['$scope', '$modal', '$log', function ModalDemoCtrl($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function() {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl, //what do I put here to reference the other controller?
resolve: {
items: function() {
return $scope.items;
}
}
});
modalInstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
}]);
In $modal.open, how do I reference ModalInstanceCtrl correctly?
You put it in quotes, like this controller: 'ModalInstanceCtrl',
Here is an example based on the demo in angular-ui bootstrap
http://plnkr.co/edit/Xa6KqUCew9OTrtEQYjku?p=preview
i am trying to use the modal directive from ui-bootstrap 0.6
here is the working default plunker from the ui-bootstrap page:
http://plnkr.co/edit/JGBiBSeRqOnwRhYA9py8?p=preview
now, i tried to make the coding style fits angular-seed style to include it in one app like this :
http://plnkr.co/edit/Y59rwlcNpQdijKtmjOPy?p=preview
angular.module('MyModal', ['ui.bootstrap', 'MyModal.controllers']);
angular.module('MyModal.controllers', [])
.controller('ModalDemoCtrl', [ '$scope', '$modal', '$log', function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
}])
.controller('ModalInstanceCtrl', [ '$scope', '$modalInstance', 'items', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
but it's giving an error ReferenceError: ModalInstanceCtrl is not defined
how can i make this work using this way of defining controllers ?
Provide controller name as String, exactly as you would do in route definitions, directives etc.:
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
items: function () {
return $scope.items;
}
}
});
You can use quotes as the other answer suggests, or you can also do as the example in the docs and define the variable:
var ModalInstanceCtrl = function ($scope, $modalInstance, items) { ... }