我已经创建了一个"通知"任务完成时基本通知的组件。它有一个关闭按钮,允许用户在看到通知后关闭通知。我面临的问题是,一旦用户点击关闭按钮,"通知"组件模板被删除。因此,无法看到进一步的通知。
组件:notification.js
```
angular
.module("app")
.component("notification", {
bindings: {
notificationType: "@",
notificationMessage: "@",
notificationCloseCallBack: "&"
},
controller: function($scope, $rootScope) {
var vm = this;
vm.notificationCssStyle = {
"info": "pficon-info",
"success": "pficon-ok",
"warning": "pficon-warning-triangle-o",
"danger": "pficon-error-circle-o"
}
vm.closeNotification = function() {
vm.notificationCloseCallBack();
};
},
controllerAs: "vm",
template: "<div ng-show='vm.notificationMessage.length' class='toast-pf alert alert-{{vm.notificationType}} alert-dismissable'>" +
"<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>" +
"<span class='pficon pficon-close' ng-click='vm.closeNotification()'></span>" +
"</button>" +
"<span class='pficon {{vm.notificationCssStyle[vm.notificationType]}}'></span>" +
"{{vm.notificationMessage}}" +
"</div>"
});
```
查看使用通知指令的位置 - header.html
```
<span class="pull-right">
<notification notification-type="{{$root.notification.type}}" notification-message="{{$root.notification.message}}" notification-close-call-back="header.notificationClose()"></notification>
</span>
```
header.js
```
angular
.module("app")
.component("header", {
restrict: "E",
templateUrl: "/modules/base/header/header.html",
bindings: {
isNavigationShow: "="
},
controller: headerController,
controllerAs: "header"
});
/*@ngInject*/
function headerController($rootScope, $state, $scope, utils) {
var vm = this;
vm.notificationClose = notificationClose;
$rootScope.notification = {
"type": "",
"message": ""
};
function notificationClose() {
$rootScope.notification.type = "";
$rootScope.notification.message = "";
}
}