组件模板一旦关闭就会被删除

时间:2017-08-28 08:45:37

标签: javascript angularjs

我已经创建了一个"通知"任务完成时基本通知的组件。它有一个关闭按钮,允许用户在看到通知后关闭通知。我面临的问题是,一旦用户点击关闭按钮,"通知"组件模板被删除。因此,无法看到进一步的通知。

组件: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 = "";
    }

}

0 个答案:

没有答案