Live example see this plunker.
For short, $modal here:
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalCtrl',
resolve: {
value: function() { return value; }
}
});
Below code can't get $scope.model.value set
app.controller('ModalCtrl', ['$scope', '$modalInstance',
function($scope, $modalInstance, value) {
$scope.model = {value : value};
...
But following code can
app.controller('ModalCtrl', function($scope, $modalInstance, value) {
$scope.model = {value : value};
...
That's weird to me.
You must write all arguments inside the inline annotation:
app.controller('ModalCtrl', ['$scope', '$modalInstance', 'value',
function($scope, $modalInstance, value) {
Related
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 opened modal with ng-click inside controller on the same URL.
I need to create custom url for modal.
How should I proceed?
dashboardAppControllers.controller('abcController', ['$scope', '$window', '$log', '$http', '$timeout', '$routeParams', '$uibModal', 'Notification', '$interval', 'userDetails', '$filter', function($scope, $window, $log, $http, $timeout, $routeParams, $uibModal, Notification, $interval, userDetails, $filter) {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'remarksEditModal.html',
controller: 'remarksEditModalControllers',
size: "lg",
windowClass: 'center-modal',
resolve: {
bookingInfo: function() {
return event;
}
}
});
}]);
you can create a different state of that popup and open it with onEnter property. something like this
.state("wizard", {
url: '/wizard',
params: {
somethingWhichTurnTrueOnclick: null
}
onEnter: function($state, $timeout, $uibModal) {
var openWizard = function() {
var modal = $uibModal.open({
animation: true,
templateUrl: 'remarksEditModal.html',
controller: 'remarksEditModalControllers',
size: "lg",
windowClass: 'center-modal',
resolve: {
bookingInfo: function() {
return event;
}
}
});
modal.result.then(function(response) {
// console.log('Wizard closed', response );
});
};
openWizard(); // open wizard
});
I am trying to pass values to a modal over parameters. For some reason this parameter is always undefined when I try to access it in my controller. The second answer of this question is what I am building upon.
Here is my setup for the modal. Please note that $scope.evaluationResult is defined and has valid content.
$scope.showEvaluationResult = function() {
var modalInstance = $modal.open({
templateUrl: 'evaluation-result/evaluation-result-dlg.html',
controller: 'EvaluationResultDialogCtrl',
windowClass: 'evaluation-result-dlg',
size: 'lg',
resolve: {
evaluationResult: function() {
return $scope.evaluationResult;
}
}
});
setupKeyHandling(modalInstance);
}
Here is my controller:
/**
* The controller for displaying evaluation results.
*/
annotatorApp.controller('EvaluationResultDialogCtrl', ['$scope', '$modal', '$modalInstance', '$http',
function ($scope, $modal, $modalInstance, $http, evaluationResult) {
$scope.trainingLog = {
text: ''
};
$scope.close = function () {
$modalInstance.close();
};
$scope.evaluationResult = evaluationResult; // Always undefined
}]);
What is the problem here?
You forgot to put it in injection array, should be:
annotatorApp.controller('EvaluationResultDialogCtrl', ['$scope', '$modal', '$modalInstance', '$http', 'evaluationResult',
function ($scope, $modal, $modalInstance, $http, evaluationResult) {
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
The modal in angular-ui example is implemented with a ModalInstanceCtrl inside a ModalDemoCtrl controller like so:
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.open = function () {
var modalInstance = $modal.open({
...
controller: ModalInstanceCtrl,
...
});
...
};
};
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
...
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
};
When trying this approach by registering the Controllers with angular like so:
app.controller('ModalInstanceCtrl', ['$scope', '$modal', '$log',
function ($scope, $modalInstance, items) {
...
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
}]);
app.controller('ModalDemoCtrl', ['$scope', '$modal', '$log', 'ModalInstanceCtrl',
function ($scope, $modal, $log, ModalInstanceCtrl) {
$scope.open = function () {
var modalInstance = $modal.open({
...
controller: ModalInstanceCtrl,
...
});
...
};
}]);
I get the following error:
Error: Unknown provider: ModalInstanceCtrlProvider <- ModalInstanceCtrl
Should it be possible to nest controllers like this in angular?
You don't need to inject ModelInstanceCtrl into your ModalDemoCtrl. The controller definition should be
app.controller('ModalDemoCtrl', ['$scope', '$modal', '$log',
function ($scope, $modal, $log) {
It should work without this too. If it does not try
var modalInstance = $modal.open({
...
controller: 'ModalInstanceCtrl',
...
});