Vulnerability AngularJS UI Bootstrap modal could not execute functions from area

Question

In my angularjs application, I use UT Bootstrap to create modals. I pass the region and the custom controller to the modal one, it shows my data from the original region, but cannot perform any of its functions. I have a main controller:

myapp.controller('WsCtrl', function WsCtrl($scope, $location, todoStorage, filterFilter, $modal, $log) { 

In the controller, I have the following:

 $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 modally, I can see all my users, but I cannot add a problem with functions in my source scope.

Answer 1

You do not need scope: $scope . The resolve parameter is responsible for passing variables to ModalInstanceCtrl. But you must add these parameters to your dependencies (their names must match those of resolve ), therefore, 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 in exactly the same way as other variables inside resolve :

 resolve: { someFunction: function(){ return $scope.someFunctionFromOriginalScope } } 

In addition, you can enter any other service in the resolve section and execute additional logic inside it:

 resolve: { someFunction: function(configService){ if (configService.isProduction){ return angular.noop; } else { return $scope.someFunctionFromOriginalScope; } } } 

Answer 2

If you really need to pass in a user-defined scope (that is, if you want to avoid dependency injection that doesn't always execute), you should do it like this:

 $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 will 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'); }; };