var modalInstance = $modal.open({
templateUrl: 'views/modals/addDevice.html',
controller: ModalCtrl
});
modalInstance.result.then(function (newDevice) {
});
I will implement it in this way:
app.controller("ModalCtrl", function( $scope, $modalInstance ) {
});
But only this way is accepted:
var ModalCtrl = function ($scope, $modalInstance) {
};
Why this happens?
When registering a controller the following way:
app.controller("ModalCtrl", function( $scope, $modalInstance ) {
});
You haven't declared a ModalCtrl variable so in the following case ModalCtrl would be undefined:
var modalInstance = $modal.open({
templateUrl: 'views/modals/addDevice.html',
controller: ModalCtrl
});
You can provide the controller name as a string instead:
var modalInstance = $modal.open({
templateUrl: 'views/modals/addDevice.html',
controller: 'ModalCtrl'
});
I think you are having issues because the value for your controller name needs to be in quotes -
var modalInstance = $modal.open({
templateUrl: 'views/modals/addDevice.html',
controller: 'ModalCtrl' // <-- this needs to be in quotes
});
This is defining your controller class:
var ModalCtrl = function ($scope, $modalInstance) {
};
you need to create an instance of the class:
var instance = new ModalCtrl(args)
Use cotes for the controller name. That will work fine.
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
ng-show and ng-hide are not working properly. In my controller I have
$scope.isHide=true; It is working. But $scope is not updating when it changes the value inside the nested function. Code description is as follows,
$scope.isHide=true //It works
$scope.productdetails = function (size,selectedproduct)
{
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: '/Selection_Routing/Selection_Product/ProductDetails.html',
controller: function ($scope, $uibModalInstance, product) {
$scope.product = product;
$scope.buy = function (path) {
$uibModalInstance.close($scope.product);
$location.path(path);
$scope.isHide= false; // Not working
};
},
});
};
I think what you miss here is to pass the current $scope to your modal,
Please try the following:
$scope.isHide=true;
$scope.productdetails = function (size,selectedproduct)
{
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: '/Selection_Routing/Selection_Product/ProductDetails.html',
scope: $scope, //passed current scope to the modal
controller: function ($scope, $uibModalInstance, product) {
$scope.product = product;
$scope.buy = function (path) {
$uibModalInstance.close($scope.product);
$location.path(path);
$scope.isHide= false;
};
},
});
};
Maybe if binded property is a object instead a primitive its works
$scope.isHide= {value:true};
$scope.productdetails = function (size,selectedproduct)
{
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: '/Selection_Routing/Selection_Product/ProductDetails.html',
scope: $scope, //passed current scope to the modal
controller: function ($scope, $uibModalInstance, product) {
$scope.product = product;
$scope.buy = function (path) {
$uibModalInstance.close($scope.product);
$location.path(path);
$scope.isHide.value= false;
};
},
});
};
Can I pass the value for the appendTo parameter to the angular bootstrap function $uibModal.open() ?
Something like this:
var options;
options.appendElement = $document.find('aside-box').eq(0);
return $uibModal.open(options);
You should use the attribute resolve
$uibModal.open({
templateUrl: 'modaltemplate.tpl.html',
controller: 'ModalCtrl',
controllerAs: 'modalCtrl',
resolve: {
myparameter: function() {
return 'teste param';
}
});
var ModalCtrl = function(myparameter, $modalInstance) {
console.log(myparameter);
}
angular
.module('myApp')
.controller('ModalCtrl', ModalCtrl)
I have a page where I have a button to launch a modal. Both pages has its own controllers. The question is how to get variable from page in modal controller?
You pass data to your modal controller using resolve.
var modalInstance = $modal.open({
templateUrl: 'template.html',
controller: 'MyModalCtrl',
resolve: {
variableToPass: function () {
return $scope.items;
}
}
});
Then you define your modal controller like this
myApp.controller('MyModalCtrl', ['$scope', $modalInstance'', 'variableToPass', function($scope, $modalInstance, variableToPass) {
...
}]);
Alternatively, or complementary, you can pass the whole $scope like this
var modalInstance = $modal.open({
templateUrl: 'template.html',
controller: 'MyModalCtrl',
scope: $scope
});
I have two controller, one using the UI Bootstrap modal. When using flat function (like) it works, but when I try and add them to my modules it does not work, giving an error: Unknown provider: ModalInstanceCtrlProvider <- ModalInstanceCtrl
What is the correct fashion to do this? Code follows:
angular.module( 'fb.controllers', [] ).controller( 'ModalInstanceCtrl', function( $scope, $modalInstance, data ) {
$scope.data = data;
$scope.ok = function () { $modalInstance.close(); };
$scope.cancel = function () { $modalInstance.dismiss(); };
});
angular.module( 'fb.controllers' ).controller( 'shortLinkModal', ['ModalInstanceCtrl', function( $scope, $modal, ModalInstanceCtrl ) {
$scope.open = function ( url, title ) {
var modalInstance = $modal.open( {
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: { data: function () { return { title: 'Short Link', url: url, bb: '[url=' + url + ']' + title + '[/url]' } } }
});
};
}]);
On further investigation, it appears that the controller: ModalInstanceCtrl part is expecting a function.
If you add your modal controller to module, you need to use string literal, like this
controller: 'ModalInstanceCtrl',
Controllers can't be injected into other controllers.
Simply pass the controller name, and the $modal.open() method will instantiate it:
var modalInstance = $modal.open( {
controller: 'ModalInstanceCtrl',
...
});