Displaying a bootstrap Modal dialog from Angular Controller

Question

I'm trying to figure out how I can present a bootstrap modal dialog from my Angular controller. Basically what I have is a table. When the user clicks on a table row I want to present a modal dialog that contains details about the selected row.

The way I'm thinking about approaching this is have each table row respond to an ng-click. The ng-click will call a function in the controller and this function will present the modal dialog as well as pass it the data it needs to display.

I know how to display a modal dialog from the view itself, but I'm not sure how I can trigger the modal from the controller. Any ideas?

The controller, for the view, has the following function which will be called when the user selects a row to view a modal dialog.

$scope.rowClicked = function(rowID){ $scope.dataForModal = Data.get(rowID, function(err,data){ //Here is where I'd like to display the modal dialog in the view }); }

The problem is I'm not sure how I can achieve this . hmm. You can do what you think. that is correct way. — Ramesh Rajendran
– Ramesh Rajendran, Commented Apr 22, 2015 at 12:58
Take a look at angular-ui.github.io/bootstrap and their $modal provider — dco
– dco, Commented Apr 22, 2015 at 13:01

Johan van der Vleuten · Accepted Answer · 2015-04-22 13:08:05Z

See http://angular-ui.github.io/bootstrap/#/modal

Use a ng-click="showDetails(item)" on the cell/row in your view. Then use this code in your controller to show the Modal:

$scope.showDetails = function (item) { var modalInstance = $modal.open({ templateUrl: 'yourview.html', controller: 'DetailModalController', resolve: { item: function () { return item; }, } }); modalInstance.result.then(function (item) { // ok }, function () { // dismiss }); };

Your modal controller can be something like this:

angular.module('app').controller('DetailModalController', [ '$scope', '$modalInstance', 'item', function ($scope, $modalInstance, item) { $scope.item = item; $scope.dismiss = function () { $modalInstance.dismiss(); }; $scope.close = function () { $modalInstance.close($scope.item); }; }; }]);

With $modalInstance.close($scope.item); you can pass an object. With $modalInstance.dismiss(); you dismiss the modal without an object.

I'm getting a "ReferenceError: $modal is not defined" error. Should I be injecting $modal into the controller? When I inject $modal into the controller I get "Error: $injector:unpr Unknown Provider".
That's correct. Be sure to add the angular-ui library from the provided link in your project, otherwise you will not be able to inject it as can be seen in the error.

Collectives™ on Stack Overflow

Displaying a bootstrap Modal dialog from Angular Controller

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related