Pass variables into function - Angular

Question

I want to open a modal declaring the modal file name, and an image url I want to use in the scope of the modal. e.g.:

ng-click="showModal('screenshot','http://placehold.it/800x550')"

When I try the above I'm getiing the following error:

Error: [$injector:unpr] Unknown provider: imageUrlProvider <- imageUrl <- ModalController

Here's the code I'm trying - Modal Controller:

hmwsApp.controller('ModalController', function($scope, close, imageUrl) {

  $scope.imageUrl = imageUrl;

  $scope.close = function(result) {
    close(result, 500); // close after 500ms to allow for bootstrap to animate
  };

});

Main Controller:

hmwsApp.controller('mainController', ['$scope', '$http', '$rootScope', 'ModalService', function($scope, $http, $rootScope, ModalService) {

$scope.showModal = function(modalUrl, imageUrl) {
  ModalService.showModal({
    templateUrl: '/views/modals/' + modalUrl + '.html',
    controller: "ModalController",
    resolve: {
      imageUrl: function () {
        return imageUrl;
     }
   }
  })
  .then(function(modal) {
    modal.element.modal();
    modal.close.then(function(result) {
      $scope.message = "Image shown " + result;
    });
  });
};

}]);

Is there anything obviously wrong?

Did you try to set imageUrl as object and not primitive? for example: resolve: { imageUrl: function () { return {data: imageUrl}; } } — Maxim Shoustin
– Maxim Shoustin, Commented Apr 16, 2015 at 8:06
I'm wondering how you can inject "close" into your ModalController, because i try it and it send me an error "Unknown provider: closeProvider <- close" . Is there any confusion? — nnc1311
– nnc1311, Commented Apr 16, 2015 at 9:40

Amir Popovich · Accepted Answer · 2015-04-16 08:05:42Z

4

What you did here:

hmwsApp.controller('ModalController', function($scope, close, imageUrl)

is injected imageUrl into your controller.

What you wanted to do is create an input param named imageUrl inside a controller method:

hmwsApp.controller('ModalController', function($scope) {
   $scope.showModal = function(screenshot,imageUrl){
      // do something
    }
    ......
  });

answered Apr 16, 2015 at 8:05

Amir Popovich

30.1k9 gold badges58 silver badges102 bronze badges

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

1 Comment

StudioTime Over a year ago

But I already have that function in the mainController - are you saying to replicate it in the ModalController? How would my code block look fully? Apologies if I'm missing something, new to Angular

Collectives™ on Stack Overflow

Pass variables into function - Angular

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related