5

How can I make data available in a controller? I have created a really simple Plunk that should show data on the $scope in a modal. I’ll then need to update the data, and only update $scope on clicking “ok”. Clicking “cancel” will discard the changes.

But before I get to that step, I need to make the scope available to the modal. Most of the examples use two controllers. Do I need another controller as in this example: Passing Data to Twitter Bootstrap Modal in Angular? In my controller I have the following:

$scope.open = function(){ var modalInstance = $uibModal.open({ templateUrl: 'modal.html', controller: 'ModalInstanceController', resolve: { users: function() { return $scope.users; } } }); };

How can I display the users in the template? The plunk is here: http://plnkr.co/edit/FuXjSwtljQtFYOtFRV18?p=preview

Improve this question
1

4 Answers 4

Reset to default
10

To be able to access scope of the controller you need to pass scope object to the modal when creating an instance of it:

 $scope.open = function() { var modalinstance = $uibModal.open({ scope: $scope, templateUrl: 'modal.html', resolve: { users: function() { return $scope.users; } } }) };

This way Angular will create child scope of the controller $scope so you will be able to access items inside of modals scope:

Demo: http://plnkr.co/edit/0m9oktX2JHFmeiaDfOpO?p=preview

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

it's helpful to me too.
2

You can access scope in modal - 

 $scope.open = function(){ var modalinstance = $uibModal.open({ templateUrl: 'modal.html', scope:$scope }) };
Improve this answer

1 Comment

Thanks i just added scope as a parameter declaration and it worked perfectly, thank you very much for your advice.
1

you can do it with just one controller, is just that is a "dirty" solution, because both html files will share the same controller, which is potentially an issue.

the problem you are facing is that in the modal you don't have a defined scope, so the foreach (ng-repeat) you are doing is not getting any elements

you can fix it easily by changing your modal.html to

<div ng-controller="modalController"><div class="modal-header"> <h3 class="modal-title">Modal</h3> </div> <div class="modal-body"> <p>Existing users:</p> <ul> <li ng-repeat="user in users">{{user}}</li> </ul> </div> <div class="modal-footer"> <button class="btn btn-default" type="button">Close</button> </div> </div>

as you see, now this modal has a controller (the same as the main window) and so will have a scope

or else just pass the scope to the modal definition adding

var modalinstance = $uibModal.open({ scope: $scope,...

is dirty, and you are "polluting" the scope, but it works :)

Improve this answer

Comments

0

Here is some code from my current project it works as expected if you want to use any ng-click on the modal your function has to reside in ModalInstanceController 

app.controller('dashboardCtrl', function ($scope, $rootScope, $location, $http, Data, $uibModal ) { $scope.users = ''; $scope.open = function(){ var modalInstance = $uibModal.open({ templateUrl: 'modal.html', controller: 'ModalInstanceController', resolve: { users: function() { return $scope.users; } } }) } }); app.controller('ModalInstanceController', function ($scope, $uibModal, $uibModalInstance, users, $rootScope, $http, Data) { $scope.ok = function () { $uibModalInstance.close($scope.selected.item); } $scope.cancel = function () { $uibModalInstance.dismiss('cancel'); } $scope.users = users ; $scope.selected = { users: $scope.users[0] }; });
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.