Angular-Material , AngularJS , TypeScript , Javascript , ng-controller not accessible within my md-dialog

Question

I have a problem in my code, I'm trying to call on my users with a ng-controller in (declared on index like this ' ng-controller="mainController as vm" ') and I can use this in my code to access the user and to get his email and images. But now I want to be able to open a md-dialog when you click my image , so the image can be enlarged in the dialog, my dialog opens but I cant access my controller (vm) to say what image he has to show.

This opens the image in my content page:

<img src="{{vm.selected.item4}}" />

works perfectly btw

and this is how I open the dialog:

<md-button ng-click="vm.showDialog($event)" >
            <img src="{{vm.selected.item1}}"/>
</md-button>

My dialog opens but it won't show the image... Has anyone got an idea of how to resolve this problem?

(if my topic or question isn't formed correctly I'm sorry in advance , I'm new to this so correct me if something isn't like it's suppose to...)

Answer 1

There are several ways to pass a value from parent scope to your dialog. Here are 3 example usages. You can play with them by using this codepen .

.controller('AppCtrl', function ($scope, $mdDialog) {

  $scope.imageUrl = "https://upload.wikimedia.org/wikipedia/commons/1/18/Bradypus.jpg";

    // Show the image in the dialog by using parent scope directly in the template.
  $scope.showDialog = function(ev) {
    $mdDialog.show({
      template: '<img src="' + $scope.imageUrl + '"></img>',
      parent: angular.element(document.querySelector('#popupContainer')),
      targetEvent: ev,
      clickOutsideToClose: true,
      ariaLabel: 'Dialog 1',
    });
  }

  // Get the image from the function call and use directly in the template
  $scope.showDialog2 = function(ev, image) {
    $mdDialog.show({
      template: '<img ng-src="' + image + '"></img>',
      parent: angular.element(document.querySelector('#popupContainer')),
      targetEvent: ev,
      clickOutsideToClose: true,
      ariaLabel: 'Dialog 2'
    });
  }

  // Show the image by defining locals. This is the most elegant way, 
  // IMO. You can make any value available by defining locals. After 
  // defining locals, you can use the defined locals in your dialog 
  // controller. After you get the locals from your controller, you can 
  // easily use them in your dialog's template.
  $scope.showDialog3 = function(ev) {
    $mdDialog.show({
      template: '<img ng-src="{{image}}"></img>',
      parent: angular.element(document.querySelector('#popupContainer')),
      targetEvent: ev,
      clickOutsideToClose: true,
      ariaLabel: 'Dialog 3',
      locals: {image: $scope.imageUrl},
      controller: function($scope, $log, image) {
        $scope.image = image;
      }
    });
  }

});

HTML:

<div ng-app="MyApp">
  <div ng-controller="AppCtrl">
    <md-content id="popupContainer" style="height: 500px;">

      <md-button class="md-raised md-primary" ng-click="showDialog($event)">
        Open Dialog
      </md-button>
      <md-button class="md-raised md-primary" ng-click="showDialog2($event, imageUrl)">
        Open Dialog 2
      </md-button>
      <md-button class="md-raised md-primary" ng-click="showDialog3($event)">
        Open Dialog 3
      </md-button>

    </md-content>
  </div>
</div>

You can also check the examples from the docs .