Attempting to utilize the confirm function within an Angular Material $mdDialog in order to clear an array and then log it to the console is proving problematic. There appears to be an issue with accessing 'this' objects, arrays, expressions, and functions within the $mdDialog function itself. The console is indicating that whatever item is being referenced is undefined, even if it has been used in other controller functions.
Is there a compatibility problem between the $mdDialog directive and the 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);
})
}