I've developed a custom angular directive to clear a notifications array (defined in controller using controllerAs 'this' syntax), when a button is clicked and then when a confirm button is clicked on a dialog that appears.
So the process is:
click on 'Clear Notifications' > dialog appears > click on 'Confirm' > clear array
Alternatively, in the same directive I've defined that if 'Cancel' is clicked on when the dialog appears, the array is not affected.
I've done this using an $mdMDialog from angular material, all within the directive code.
However, even though the model is clearly being affected as a result of confirming array clearance, the view does not update with various methods, including wrapping the directive function in $scope.$apply and adding a $scope.$apply callback function in the controller, injected as an argument in the directive link function.
I initially had this function within the controller and it worked fine, but due to moving it into a directive, the view no longer updates when the model changes.
Example similar to my app in JSFiddle: http://jsfiddle.net/c9v83vo4/7/.
(I've included a commented-out controller method to demonstrate.)
-
HTML:
<md-list-item ng-repeat="notification in notifications.shownNotifications | orderBy:notifications.sortProperty " ng-click="notifications.selectedNotification=notification; notification.read=true" ng-class=" { 'active': notifications.selectedNotification==notification, 'unread': notification.read == false } " class="md-3-line notification-item" md-ink-ripple="#fff">
Controller:
app.controller('notificationsController', function($scope, $state, $http, $document, $mdDialog, $filter, $timeout, $mdToast) {
var main = this;
this.test = 'TEST';
this.selectedNotification = null;
this.notifications = [
{
title: 'Notification One',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu nisl nec quam iaculis aliquet. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce felis leo, ornare nec pharetra non, elementum non dui. Fusce sed lacinia libero, a luctus ligula. Integer in felis ex. Nam sed pellentesque tellus, in luctus nibh.',
time: '2017-10-27T16:39:32+00:00',
importance: 'Low',
read: false
},
{
title: 'Notification Two',
description: 'Donec quis ligula odio. Sed sit amet magna eu erat posuere maximus. Nulla vitae erat pharetra, molestie augue in, pellentesque urna. Nullam gravida, turpis ac imperdiet cursus, elit lorem facilisis est, nec posuere magna arcu sed metus. Cras a ex ultrices, sagittis quam sit amet, sollicitudin massa. Nam orci turpis, sagittis ut sapien vel, mattis sodales lectus. Phasellus malesuada commodo metus, eget tempus nibh consectetur ac. Nullam dictum dui ac nunc accumsan, tristique varius risus porta. Mauris velit diam, cursus eu enim sit amet, egestas suscipit augue.',
importance: 'High',
time: '2017-11-28T12:38:34+00:00',
read: false
},
{
title: 'Notification Three',
description: 'Praesent varius metus et efficitur sollicitudin. Mauris diam neque, feugiat vitae lorem non, accumsan lacinia urna. Morbi faucibus enim ut eros ullamcorper, ultricies malesuada massa ultrices. Vivamus rutrum urna purus, sed blandit ipsum finibus sed. In molestie diam ut justo convallis maximus. Nulla massa arcu, molestie et mauris eu, semper sodales magna. Nunc faucibus iaculis dictum. Nulla feugiat, est lobortis scelerisque pellentesque, est enim rutrum nulla, non laoreet orci ligula quis ex.',
importance: 'Low',
time: '2017-11-29T09:56:43+00:00',
read: false
},
{
title: 'Notification Four',
description: 'Praesent varius metus et efficitur sollicitudin. Mauris diam neque, feugiat vitae lorem non, accumsan lacinia urna. Morbi faucibus enim ut eros ullamcorper, ultricies malesuada massa ultrices. Vivamus rutrum urna purus, sed blandit ipsum finibus sed. In molestie diam ut justo convallis maximus. Nulla massa arcu, molestie et mauris eu, semper sodales magna. Nunc faucibus iaculis dictum. Nulla feugiat, est lobortis scelerisque pellentesque, est enim rutrum nulla, non laoreet orci ligula quis ex.',
importance: 'Low',
time: '2017-12-04T12:38:34+00:00',
read: true
},
{
title: 'Notification Five',
description: 'Praesent varius metus et efficitur sollicitudin. Mauris diam neque, feugiat vitae lorem non, accumsan lacinia urna. Morbi faucibus enim ut eros ullamcorper, ultricies malesuada massa ultrices. Vivamus rutrum urna purus, sed blandit ipsum finibus sed. In molestie diam ut justo convallis maximus. Nulla massa arcu, molestie et mauris eu, semper sodales magna. Nunc faucibus iaculis dictum. Nulla feugiat, est lobortis scelerisque pellentesque, est enim rutrum nulla, non laoreet orci ligula quis ex.',
importance: 'Low',
time: '2017-11-27T16:39:32+00:00',
read: false
},
{
title: 'Notification Six',
description: 'Praesent varius metus et efficitur sollicitudin. Mauris diam neque, feugiat vitae lorem non, accumsan lacinia urna. Morbi faucibus enim ut eros ullamcorper, ultricies malesuada massa ultrices. Vivamus rutrum urna purus, sed blandit ipsum finibus sed. In molestie diam ut justo convallis maximus. Nulla massa arcu, molestie et mauris eu, semper sodales magna. Nunc faucibus iaculis dictum. Nulla feugiat, est lobortis scelerisque pellentesque, est enim rutrum nulla, non laoreet orci ligula quis ex.',
importance: 'High',
time: '2018-01-04T12:38:34+00:00',
read: false
},
{
title: 'Notification Seven',
description: 'Praesent varius metus et efficitur sollicitudin. Mauris diam neque, feugiat vitae lorem non, accumsan lacinia urna. Morbi faucibus enim ut eros ullamcorper, ultricies malesuada massa ultrices. Vivamus rutrum urna purus, sed blandit ipsum finibus sed. In molestie diam ut justo convallis maximus. Nulla massa arcu, molestie et mauris eu, semper sodales magna. Nunc faucibus iaculis dictum. Nulla feugiat, est lobortis scelerisque pellentesque, est enim rutrum nulla, non laoreet orci ligula quis ex.',
importance: 'Low',
time: '2017-11-27T16:39:32+00:00',
read: false
},
{
title: 'Notification Eight',
description: 'Praesent varius metus et efficitur sollicitudin. Mauris diam neque, feugiat vitae lorem non, accumsan lacinia urna. Morbi faucibus enim ut eros ullamcorper, ultricies malesuada massa ultrices. Vivamus rutrum urna purus, sed blandit ipsum finibus sed. In molestie diam ut justo convallis maximus. Nulla massa arcu, molestie et mauris eu, semper sodales magna. Nunc faucibus iaculis dictum. Nulla feugiat, est lobortis scelerisque pellentesque, est enim rutrum nulla, non laoreet orci ligula quis ex.',
importance: 'High',
time: '2017-11-27T13:38:34+00:00',
read: true
},
{
title: 'Notification Nine',
description: 'Praesent varius metus et efficitur sollicitudin. Mauris diam neque, feugiat vitae lorem non, accumsan lacinia urna. Morbi faucibus enim ut eros ullamcorper, ultricies malesuada massa ultrices. Vivamus rutrum urna purus, sed blandit ipsum finibus sed. In molestie diam ut justo convallis maximus. Nulla massa arcu, molestie et mauris eu, semper sodales magna. Nunc faucibus iaculis dictum. Nulla feugiat, est lobortis scelerisque pellentesque, est enim rutrum nulla, non laoreet orci ligula quis ex.',
importance: 'Low',
time: '2017-11-28T13:38:34+00:00',
read: false
},
{
title: 'Notification Ten',
description: 'Praesent varius metus et efficitur sollicitudin. Mauris diam neque, feugiat vitae lorem non, accumsan lacinia urna. Morbi faucibus enim ut eros ullamcorper, ultricies malesuada massa ultrices. Vivamus rutrum urna purus, sed blandit ipsum finibus sed. In molestie diam ut justo convallis maximus. Nulla massa arcu, molestie et mauris eu, semper sodales magna. Nunc faucibus iaculis dictum. Nulla feugiat, est lobortis scelerisque pellentesque, est enim rutrum nulla, non laoreet orci ligula quis ex.',
importance: 'Low',
time: '2016-07-11T12:11:20+00:00',
read: true
},
{
title: 'Notification Eleven',
description: 'Praesent varius metus et efficitur sollicitudin. Mauris diam neque, feugiat vitae lorem non, accumsan lacinia urna. Morbi faucibus enim ut eros ullamcorper, ultricies malesuada massa ultrices. Vivamus rutrum urna purus, sed blandit ipsum finibus sed. In molestie diam ut justo convallis maximus. Nulla massa arcu, molestie et mauris eu, semper sodales magna. Nunc faucibus iaculis dictum. Nulla feugiat, est lobortis scelerisque pellentesque, est enim rutrum nulla, non laoreet orci ligula quis ex.',
importance: 'Low',
time: '2017-10-21T09:36:37+00:00',
read: false
},
{
title: 'Notification Twelve',
description: 'Praesent varius metus et efficitur sollicitudin. Mauris diam neque, feugiat vitae lorem non, accumsan lacinia urna. Morbi faucibus enim ut eros ullamcorper, ultricies malesuada massa ultrices. Vivamus rutrum urna purus, sed blandit ipsum finibus sed. In molestie diam ut justo convallis maximus. Nulla massa arcu, molestie et mauris eu, semper sodales magna. Nunc faucibus iaculis dictum. Nulla feugiat, est lobortis scelerisque pellentesque, est enim rutrum nulla, non laoreet orci ligula quis ex.',
importance: 'High',
time: '2017-01-01T01:11:10+00:00',
read: true
},
{
title: 'Notification Thirteen',
description: 'Praesent varius metus et efficitur sollicitudin. Mauris diam neque, feugiat vitae lorem non, accumsan lacinia urna. Morbi faucibus enim ut eros ullamcorper, ultricies malesuada massa ultrices. Vivamus rutrum urna purus, sed blandit ipsum finibus sed. In molestie diam ut justo convallis maximus. Nulla massa arcu, molestie et mauris eu, semper sodales magna. Nunc faucibus iaculis dictum. Nulla feugiat, est lobortis scelerisque pellentesque, est enim rutrum nulla, non laoreet orci ligula quis ex.',
importance: 'Low',
time: '2016-06-16T06:35:22+00:00',
read: false
},
{
title: 'Notification Fourteen',
description: 'Praesent varius metus et efficitur sollicitudin. Mauris diam neque, feugiat vitae lorem non, accumsan lacinia urna. Morbi faucibus enim ut eros ullamcorper, ultricies malesuada massa ultrices. Vivamus rutrum urna purus, sed blandit ipsum finibus sed. In molestie diam ut justo convallis maximus. Nulla massa arcu, molestie et mauris eu, semper sodales magna. Nunc faucibus iaculis dictum. Nulla feugiat, est lobortis scelerisque pellentesque, est enim rutrum nulla, non laoreet orci ligula quis ex.',
importance: 'High',
time: '2017-05-27T16:39:32+00:00',
read: false
},
{
title: 'Notification Fifteen',
description: 'Praesent varius metus et efficitur sollicitudin. Mauris diam neque, feugiat vitae lorem non, accumsan lacinia urna. Morbi faucibus enim ut eros ullamcorper, ultricies malesuada massa ultrices. Vivamus rutrum urna purus, sed blandit ipsum finibus sed. In molestie diam ut justo convallis maximus. Nulla massa arcu, molestie et mauris eu, semper sodales magna. Nunc faucibus iaculis dictum. Nulla feugiat, est lobortis scelerisque pellentesque, est enim rutrum nulla, non laoreet orci ligula quis ex.',
importance: 'Low',
time: '2017-08-19T19:12:00+00:00',
read: false
},
{
title: 'Notification Sixteen',
description: 'Praesent varius metus et efficitur sollicitudin. Mauris diam neque, feugiat vitae lorem non, accumsan lacinia urna. Morbi faucibus enim ut eros ullamcorper, ultricies malesuada massa ultrices. Vivamus rutrum urna purus, sed blandit ipsum finibus sed. In molestie diam ut justo convallis maximus. Nulla massa arcu, molestie et mauris eu, semper sodales magna. Nunc faucibus iaculis dictum. Nulla feugiat, est lobortis scelerisque pellentesque, est enim rutrum nulla, non laoreet orci ligula quis ex.',
importance: 'Low',
time: '2017-09-28T18:56:22+00:00',
read: true
},
{
title: 'Notification Seventeen',
description: 'Praesent varius metus et efficitur sollicitudin. Mauris diam neque, feugiat vitae lorem non, accumsan lacinia urna. Morbi faucibus enim ut eros ullamcorper, ultricies malesuada massa ultrices. Vivamus rutrum urna purus, sed blandit ipsum finibus sed. In molestie diam ut justo convallis maximus. Nulla massa arcu, molestie et mauris eu, semper sodales magna. Nunc faucibus iaculis dictum. Nulla feugiat, est lobortis scelerisque pellentesque, est enim rutrum nulla, non laoreet orci ligula quis ex.',
importance: 'Low',
time: '2017-07-07T07:11:49+00:00',
read: false
},
{
title: 'Notification Eighteen',
description: 'Praesent varius metus et efficitur sollicitudin. Mauris diam neque, feugiat vitae lorem non, accumsan lacinia urna. Morbi faucibus enim ut eros ullamcorper, ultricies malesuada massa ultrices. Vivamus rutrum urna purus, sed blandit ipsum finibus sed. In molestie diam ut justo convallis maximus. Nulla massa arcu, molestie et mauris eu, semper sodales magna. Nunc faucibus iaculis dictum. Nulla feugiat, est lobortis scelerisque pellentesque, est enim rutrum nulla, non laoreet orci ligula quis ex.',
importance: 'High',
time: '2016-02-27T09:11:32+00:00',
read: true
},
{
title: 'Notification Nineteen',
description: 'Praesent varius metus et efficitur sollicitudin. Mauris diam neque, feugiat vitae lorem non, accumsan lacinia urna. Morbi faucibus enim ut eros ullamcorper, ultricies malesuada massa ultrices. Vivamus rutrum urna purus, sed blandit ipsum finibus sed. In molestie diam ut justo convallis maximus. Nulla massa arcu, molestie et mauris eu, semper sodales magna. Nunc faucibus iaculis dictum. Nulla feugiat, est lobortis scelerisque pellentesque, est enim rutrum nulla, non laoreet orci ligula quis ex.',
importance: 'Low',
time: '2017-11-13T13:14:55+00:00',
read: false
},
{
title: 'Notification Twenty',
description: 'Praesent varius metus et efficitur sollicitudin. Mauris diam neque, feugiat vitae lorem non, accumsan lacinia urna. Morbi faucibus enim ut eros ullamcorper, ultricies malesuada massa ultrices. Vivamus rutrum urna purus, sed blandit ipsum finibus sed. In molestie diam ut justo convallis maximus. Nulla massa arcu, molestie et mauris eu, semper sodales magna. Nunc faucibus iaculis dictum. Nulla feugiat, est lobortis scelerisque pellentesque, est enim rutrum nulla, non laoreet orci ligula quis ex.',
importance: 'High',
time: '2017-09-27T06:43:32+00:00',
read: false
}
]
this.shownNotifications = this.notifications;
-
Directive:
app.directive('clearNotifications', function($mdDialog, $mdToast, $timeout) {
return {
restrict: 'A',
controller: 'notificationsController',
controllerAs: 'notifications',
scope: false,
bindToController: true,
link: function($scope, element, attrs, callback) {
element.bind('click', function() {
var notifications = $scope.notifications;
notifications.notifications.length = 0;
console.log(notifications.notifications);
console.log('notifications.test: ' + notifications.test);
/* Show confirmation prompt dialog */
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(element)
/* On confirm */
$mdDialog.show(confirm).then(function() {
$scope.status = 'All notifications deleted';
console.log($scope.status);
/* Show notifications list loader */
$scope.showLoader = true;
$timeout(function() {
$scope.showLoader = false;
}, 1000)
/* Clear notifications array */
notifications.notifications.length = 0;
notifications.shownNotifications.length = 0;
console.log(notifications.notifications);
notifications.shownNotifications = angular.copy(notifications.notifications);
console.log(notifications.shownNotifications);
$scope.noNotifications = true;
/* Reset filters to 'All' default */
notifications.filters = angular.copy(notifications.resetFilters);
/* Show toast */
//$scope.toastTitle = 'TEST';
$mdToast.show(
$mdToast.simple()
.content('All notifications cleared')
.action('Close')
.position('bottom right')
.hideDelay(500000)
)
notifications.callback();
},
/* On cancel */
function() {
$scope.status = 'Notifications clearance cancelled';
console.log($scope.status);
})
})
}
}
})
