我已经开发了一个自定义角度指令来清除通知数组（在控制器中使用controllerAs'this'语法定义），当单击按钮然后时单击确认按钮出现的对话框。
所以过程是：
click on 'Clear Notifications' > dialog appears > click on 'Confirm' > clear array
或者，在同一指令中，我已经定义如果在对话框出现时单击“取消”，则阵列不受影响。
我使用角度材质的$ mdMDialog完成了这一切，所有这些都在指令代码中。
但是，即使模型明显受到确认数组清除的影响，视图也不会使用各种方法更新，包括将指令函数包装在$ scope中。$ apply并添加$ scope。$ apply回调函数在控制器中，作为参数注入指令链接函数。
我最初在控制器中有这个功能并且工作正常，但由于将其移动到指令中，当模型更改时视图不再更新。
与我在JSFiddle中的应用程序类似的示例：http://jsfiddle.net/c9v83vo4/7/。
（我已经包含了一个用于演示的注释掉的控制器方法。）
-
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">
控制器：
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;
-
指令：
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);
})
})
}
}
})
答案 0 :(得分：0)
基于jsFiddle。问题是您要将同一个控制器连接两次：到带有列表的模板
<div ng-controller="mainController as main">
并在指令
中 controller: 'mainController',
Controller是一个构造函数 - 它意味着通过ngController和＆＃39; clearItems＆＃39;连接它。指令您正在创建两个实例。因此，当您在一个指令中更改数据时，它将不会反映在第二个指令中。
建议的解决方案是：
notificationsController指令clearNotifications控制器
notificationsController clearNotifications指令解析/调用clearNotifications指令连接函数
app.controller('notificationsController', function($scope) {
// ...
main.clearNotifications = function() {
this.shownNotifications.length = 0;
};
})
app.directive('clearNotifications', ['$parse', function($parse) {
return {
restrict: 'A',
scope: {},
link: function($scope, element, attrs) {
var clearNotificationsFn = dropFn = $parse(attrs.clearNotifications);
// ...
$mdDialog.show(confirm).then(function() {
// ...
clearNotificationsFn($scope, {$event:event});
});
}
}
}]);
然后在您的HTML中，您可以将此指令连接到按钮或触发清除通知列表的内容，例如
<button clear-notifications="ctrl.clearNotifications()">
Clear notifications
</button>