Angular Material $mdDialog - Can't access 'this' items in confirm function

Question

I'm trying to use the confirm function of an angular material $mdDialog to clear an array and then log this array to the console, but there seems to be an issue with accessing 'this' objects/arrays/expressions/functions within the $mdDialog function itself, with the console saying that whatever item references is undefined, even if used previously in other controller functions.

Does the $mdDialog directive have an issue with controllerAs syntax?

-

Controller:

app.controller('notificationsController', function($scope, $state, $http, $document, $mdDialog, $filter, $timeout) {

this.selectedNotification = null;
this.notifications = [
    {
        title: 'Notification One',
        description: 'Description...',
        time: '2017-10-27T16:39:32+00:00',
        importance: 'Low',
        read: false
    },

    etc...

$scope.clearNotifications = function(ev) {
    var confirm = $mdDialog.confirm()
        .parent(angular.element('body'))
        .clickOutsideToClose(true)
        .title('Are you sure you want to clear all notifications?')
        .textContent('This action cannot be undone.')
        .ariaLabel('Confirm notifications list clearance')
        .ok('Yes')
        .cancel('No')
        .targetEvent(ev)

    $mdDialog.show(confirm).then(function() {
        $scope.status = 'All notifications deleted';
        console.log($scope.status);
        this.notifications.length = 0;
        console.log(this.notifications);
    }, function() {
        $scope.status = 'Notifications list not cleared';
        console.log($scope.status);
    })
}

why are you using this.notifications or any this.variable, in angular 1 everything should be placed under $scope variable i.e set value using $scope.notifications = {} and get value by var x = $scope.notifications — Serak Shiferaw
Erm, even I know that's not the case. There are literally people all over the internet saying that's a poor approach, and the documentation suggests the use of controllerAs syntax with 'this' items — nick.cook
yea angular 1 design is very poor but you should take their official recommendation, if you are into good practices then jump right into Angular 5 or what ever they call it recently, or follow this link if you still want to use angular 1 using factory stackoverflow.com/questions/29700783/… — Serak Shiferaw
ControllerAs and 'this' syntax has been suggested in the documentation since angular 1 — nick.cook

Ahmed Musallam Ahmed Musallam · Accepted Answer · 2017-12-08T16:37:44

The this in:

$mdDialog.show(confirm).then(function() {
    ...
    this.notifications.length = 0; // <---- here
    ...
}, function() {
    ...
})

refers to the promise resolve function of the promise returned by $mdDialog.show(), if you wanted to access the controller's notifications member you'd have to create a var that refers to the controller's this:

app.controller('notificationsController', function($scope, $state,           
$http, $document, $mdDialog, $filter, $timeout) {

  var _this = this; // <--- Now _this is the controller
  this.notifications = [
  {
    title: 'Notification One',
    description: 'Description...',
    time: '2017-10-27T16:39:32+00:00',
    importance: 'Low',
    read: false
  },

etc...

$scope.clearNotifications = function(ev) {
  ...

  $mdDialog.show(confirm).then(function() {
    ...
    _this.notifications.length = 0; //<--- using _this and not this
    ...
  }, function() {
    ...
  })
}

Angular Material $mdDialog - Can't access 'this' items in confirm function

1 Answers