material angular predefined dialog close button not working

Question

I tried a lot of methods from some sources but still cannot solve the problem of the close button of the predefined html dialog of material angularjs. When I pressed the outside area of dialog, it can be closed normally.

The error message I get using Batarang Angular is cancel is undefined.

var app = angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

app.controller('AppCtrl', function($scope, $mdDialog) {
  $scope.showTermUseDialog = function(ev) {
    $mdDialog.show({
      controller: DialogController,
      contentElement: '#termUseDialog',
      parent: angular.element(document.body),
      targetEvent: ev,
      clickOutsideToClose: true,
      scope: $scope,
      preserveScope: true
    });
  };

  function DialogController($scope, $mdDialog) {
    $scope.hide = function() {
      $mdDialog.hide();
    };

    $scope.cancel = function() {
      $mdDialog.cancel();
    };
  }



});

Full code can view at here:
http://codepen.io/skylee91/pen/xRoLXo

Note:

If the angular material version is 1.1.0, the code run as expected. But currently I am using the latest stable build 1.1.1, the close button is not fire the ng-click event.

Solution

1. There is no solution for version 1.1.1 stable release currently as 'Pre-rendered Dialogs will be not linked to any scope and will not instantiate a new controller.'
2. Currently I use angular template dialog to solve this issue.

Answer 1

You have to add scope and preservescope to the showTermUseDialog $scope.showTermUseDialog = function(ev) { $mdDialog.show({ controller: DialogController, contentElement: '#termUseDialog', parent: angular.element(document.body), targetEvent: ev, clickOutsideToClose: true, scope: $scope, preserveScope: true }); };

And also add a call to close in the html; ng-click="close()"

See plnkr here: http://plnkr.co/edit/c1tCfQVMcyj7ZtKRiTOa?p=preview