How to pass parameters to a modal? How to pass parameters to a modal? angularjs angularjs

How to pass parameters to a modal?


To pass the parameter you need to use resolve and inject the items in controller

$scope.Edit = function (Id) {   var modalInstance = $modal.open({      templateUrl: '/app/views/admin/addeditphone.html',      controller: 'EditCtrl',      resolve: {         editId: function () {           return Id;         }       }    });}

Now if you will use like this:

app.controller('EditCtrl', ['$scope', '$location'       , function ($scope, $location, editId)

in this case editId will be undefined. You need to inject it, like this:

app.controller('EditCtrl', ['$scope', '$location', 'editId'     , function ($scope, $location, editId)

Now it will work smooth, I face the same problem many time, once injected, everything start working!


The other one doesn't work. According to the docs this is the way you should do it.

angular.module('plunker', ['ui.bootstrap']);var ModalDemoCtrl = function ($scope, $modal) {    var modalInstance = $modal.open({      templateUrl: 'myModalContent.html',      controller: ModalInstanceCtrl,      resolve: {        test: function () {          return 'test variable';        }      }    });};var ModalInstanceCtrl = function ($scope, $modalInstance, test) {  $scope.test = test;};

See plunkr


Alternatively you can create a new scope and pass through params via the scope option

var scope = $rootScope.$new(); scope.params = {editId: $scope.editId};    $modal.open({        scope: scope,        templateUrl: 'template.html',        controller: 'Controller',    });

In your modal controller pass in $scope, you then do not need to pass in and itemsProvider or what ever resolve you named it

modalController = function($scope) {    console.log($scope.params)}