How to pass an angular-material list to an angular-material dialog?

[darylyu]

I'm following this as my guide: https://material.angularjs.org/#/demo/material.components.dialog

I've got a $scope.items inside AppCtrl, but I don't know how to make DialogController display it in dialog1.tmpl.html.

[PaulMougel]

Use the locals parameter to inject values into the dialog's controller:

angular
.module('yourApp')
.controller('AppCtrl', function ($scope) {
  $scope.items = [0, 1, 2, 3];
  $mdDialog.show({
      controller: 'DialogController',
      templateUrl: 'dialog1.tmpl.html',
      locals: {
        items: $scope.items
     }
  });
});

angular
.module('yourApp')
.controller('DialogController', function ($scope, items) {
  // items is injected in the controller, not its scope!
  $scope.items = items;
});

[darylyu]

Got it to work. Thanks for pointing me in the right direction.

[ajoslin]

If you use controllerAs, you can make it shorter too.

myApp.controller('AppCtrl', function($scope, $mdDialog) {
  $scope.items = [1,2,3];
  $mdDialog.show({
    controller: function Ctrl() {},
    controllerAs: 'ctrl',
    templateUrl: 'dialog1.tmpl.html',
    locals: {
      items: $scope.items
    }
  });
});

Then you can just reference ng-repeat="items in ctrl.items" in your template.

[ThomasBurleson]

@darylyu - in the future, these types of questions should be posted in the Angular Material Forum

[ThomasBurleson]

Reopen - need to update Dialog docs.

[marcysutton]

@ThomasBurleson I have a PR open for dialog docs: #1411

[marcysutton]

Closing as more detail was added to the mdDialog docs. Feature request discussion is still open in #1531.

[parmalatinter]

        $scope.showImageDialog = function (ev, imageUrl) {
            $mdDialog.show({
                controller: 'DialogCtrl',
                controllerAs: 'ctrl',
                templateUrl: ''templates/image-dialog-template.html",
                parent: angular.element(document.body),
                targetEvent: ev,
                clickOutsideToClose: true,
                locals:{
                    imageUrl: imageUrl
                }
            })
        };

    .controller('DialogCtrl', function ($scope, $mdDialog, locals) {
        $scope.locals = locals;
    })

then you can use {{locals.imageUrl}}

[codigoalvo]

Thank you very much for point me in the right direction.

[HemanthkumarHJ]

$scope.composeDialog = function (ev) { vm.res=vm.result[ev]; console.log(vm.res); $mdDialog.show({ controller : 'ManageProductController', controllerAs : 'vm', locals : { item: vm.res }, templateUrl : 'app/main/apps/manage-product/compose-dialog.html', parent : angular.element($document.body), targetEvent : ev, //clickOutsideToClose: true }); }
I couldn't get values using this code, is here any wrong?

[parmalatinter]

Did You inject locals to ManageProductController args?

Example

controller('DialogCtrl', function ($scope, $mdDialog, locals) {
$scope.locals = locals;
})

[sagarrajak]

no pls this type of question is helpful for me because https://groups.google.com/forum/#!forum/ngmaterial can't be searched by google

[shafeeqthayyil]

nice , its helped me

[florin05]

I struggled to make @ajoslin 's version work since it is the simplest, but couldn't. I had to use this method for controller definition (parameter injection)

myApp.controller('AppCtrl', function($scope, $mdDialog) {
  $scope.items = [1,2,3];
  $mdDialog.show({
    controller: ['items', function (items) {this.items = items;}],
    controllerAs: 'ctrl',
    templateUrl: 'dialog1.tmpl.html',
    locals: {
      items: $scope.items
    }
  });
});