How to pass data to template using AngularJS Material dialog

Question

I'm creating a simple comments app with AngularJS Material, I want an edit comment dialog to appear with the comment body and user-email as 2-way data binding, but because I'm using a dialog with templateUrl I can't figure out how to pass the comment data into that URL for me to edit.

  function DialogController($scope, $mdDialog) { $scope.hide = function() { $mdDialog.hide(); }; } $scope.editComment = function(comment) { $mdDialog.show({ controller: DialogController, templateUrl: 'dialog.html', parent: angular.element(document.body), targetEvent: event, clickOutsideToClose:true, fullscreen: $scope.customFullscreen, locals: { comments: $scope.comments } }); $scope.comment = comment; console.log(comment); }; 

  <!-- Comments cards --> <div class="container"> <div ng-repeat="($index,comment) in comments" style="margin-top:50px;"> <div class="md-title">Comment: {{ $index + 1 }}</div> <br> <md-card> <md-content layout="row"> <div class="flex-90"> <md-card-content class="md-title"> {{comment.body}} </md-card-content> <md-chips> <md-chip> {{comment.email}} </md-chip> </md-chips> </div> <div class="flex" layout="row" layout-align="end start"> <md-button class="md-icon-button" ng-click="editComment(comment)"> <md-icon>edit</md-icon> </md-button> <md-button class="md-icon-button" ng-click="deleteComment($event, comment)"> <md-icon>clear</md-icon> </md-button> </div> </md-content> </md-card> </div> </div> 

Answer 1

I think this is what you are trying to achive.

So, let's go steps by steps.

• You should pass comment object to controller
• Then assign this parameter to the scope of your dialog, if you don't want it to be two way binding then either use either angular.copy or Object.assign.
• After that in close function you should pass as parameter this comment object and then assign it to your parent scope comment object, so it will change there.

  function DialogController($scope, $mdDialog, comments) { $scope.comment = Object.assign(comments); $scope.hide = function() { $mdDialog.hide(); }; $scope.editComment = function () { $mdDialog.hide($scope.comment); } } $scope.editComment = function(comment) { $mdDialog.show({ controller: DialogController, templateUrl: 'dialog.html', parent: angular.element(document.body), targetEvent: event, clickOutsideToClose:true, fullscreen: $scope.customFullscreen, locals: { comments: comment } }).then(function (result) { comment = result; }); console.log(comment); }; 

  <!-- Comments cards --> <div class="container"> <div ng-repeat="($index,comment) in comments" style="margin-top:50px;"> <div class="md-title">Comment: {{ $index + 1 }}</div> <br> <md-card> <md-content layout="row"> <div class="flex-90"> <md-card-content class="md-title"> {{comment.body}} </md-card-content> <md-chips> <md-chip> {{comment.email}} </md-chip> </md-chips> </div> <div class="flex" layout="row" layout-align="end start"> <md-button class="md-icon-button" ng-click="editComment(comment)"> <md-icon>edit</md-icon> </md-button> <md-button class="md-icon-button" ng-click="deleteComment($event, comment)"> <md-icon>clear</md-icon> </md-button> </div> </md-content> </md-card> </div> </div>