CODEWITHSUNDEEP
javascriptangularjs
StudioTime
StudioTime

Reputation: 23989

Pass variables into function - Angular

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?

Upvotes: 0

Views: 149

Answers (1)

Amir Popovich
Amir Popovich

Reputation: 29836

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
    }
    ......
  });

Upvotes: 4

Related Questions