In my angularjs app I use UI Bootstrap for creating modals. I pass scope and custom controller into the modal, it shows my data from original scope but cannot perform any of its function. I have main controller:
myapp.controller('WsCtrl', function WsCtrl($scope, $location, todoStorage, filterFilter, $modal, $log) {
In controller I have next:
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'partials/users.html',
scope: $scope,
controller: ModalInstanceCtrl,
resolve: {
items: function () {
return $scope.items;
},
users: function(){
return $scope.users;
},
CurrentDate: function(){
return $scope.CurrentDate;
}
}
});
modalInstance.result.then(function (selectedItem) {
console.log(selectedItem);
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
And also I have another function outside the controller:
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.users = users;
$scope.CurrentDate = CurrentDate;
$scope.selected = {
item: $scope.items[0]
};
$scope.num = 11;
$scope.ok = function () {
$modalInstance.close($scope);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
When I pass the scope to modal - I can see all my users, but I can't add one 'cause off problem with functions in my original scope.
You don't need scope: $scope
. The resolve
parameter is responsible for passing variables to ModalInstanceCtrl. But you must add those parameters to its dependencies (their names must match those from resolve
), so if you had:
resolve: {
foo: function(){
return $scope.something
}
}
then you must have
var ModalInstanceCtrl = function ($scope, $modalInstance, foo) {
$scope.foo = foo;
// ...
}
Oh, and functions can be passed just like other variables, inside resolve
:
resolve: {
someFunction: function(){
return $scope.someFunctionFromOriginalScope
}
}
Additionally, you can inject any other service in the resolve
section and perform additional logic inside of it:
resolve: {
someFunction: function(configService){
if (configService.isProduction){
return angular.noop;
} else {
return $scope.someFunctionFromOriginalScope;
}
}
}
If you really need to pass a custom scope (i.e., if you want to avoid a dependency injection not always satisfied), you would do it this way:
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'partials/users.html',
scope: function() {
var scope = $rootScope.$new();
scope.items = $scope.items;
scope.users = $scope.users;
scope.currentDate = $scope.currentDate;
scope.someFunction = function () {
// do some stuff with scope.items
}
return scope;
}(),
controller: 'ModalInstanceCtrl'
});
modalInstance.result.then(function (selectedItem) {
console.log(selectedItem);
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
And your controller would look like this:
var ModalInstanceCtrl = function ($scope, $modalInstance) {
// Your controller already has $scope.items, $scope.users, $scope.currentDate and $scope.someFunction
$scope.selected = {
item: $scope.items[0]
};
$scope.num = 11;
$scope.ok = function () {
$modalInstance.close($scope);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With