AngularJS对所有范围都是常见的$ destroy

时间:2014-02-20 06:10:04

标签: javascript angularjs angular-ui angular-ui-bootstrap

我已经创建了一个Angular服务,它可以作为一个简单的机制,在整个应用程序的公共位置处理成功/警告/错误/信息警报(下面的代码)。这些警报绑定到Angular-UI警报元素,列出所有警报。我的控制器处理管道。

所以我的问题是如何让我的应用程序中的每个控制器在控制器被破坏时调用$ alert.clear()?我相信我可以通过从每个控制器调用类似的东西来做到这一点:

$scope.$on('$destroy', function(){
  $alerts.clear();
});

但是,我真的不希望那些样板材洒在各处。我希望能够控制我的应用程序中所有控制器常见的行为并忘记它。

提前感谢任何在正确方向上的轻微推动或猛烈抨击!

HTML代码段

<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>

service.alert.js

app.factory('$alert', function() {

    var alerts = [];

    var clearAlerts = function() {
        alerts = [];
    };

    var closeAlert = function(index, clearOthers) {
        alerts.splice(index, 1);
    };

    var createAlert = function(type, message, clearOthers) {
        if (clearOthers)
            alerts = [];

        alerts.push({type: type, msg: message});
    };

    var alertSuccess = function(message, clearOthers) {
        clearOthers = clearOthers || true;
        createAlert('success', message, clearOthers);
    };

    var alertInfo = function(message, clearOthers) {
        clearOthers = clearOthers || true;
        createAlert('info', message, clearOthers);
    };

    var alertWarning = function(message,clearOthers) {
        clearOthers = clearOthers || true;
        createAlert('warning', message, clearOthers);
    };

    var alertDanger = function(message, clearOthers) {
        clearOthers = clearOthers || true;
        createAlert('danger', message, clearOthers);
    };

    return {
        $alerts: function() { return alerts; },
        $success: function(message, clearOthers) { return alertSuccess(message, clearOthers); },
        $info: function(message, clearOthers) { return alertInfo(message, clearOthers); },
        $warning: function(message, clearOthers) { return alertWarning(message, clearOthers); },
        $danger: function(message, clearOthers) { return alertDanger(message, clearOthers); },
        $clear: function() { return clearAlerts(); },
        $close: function(index) { return closeAlert(index); }
    };
});

2 个答案:

答案 0 :(得分:0)

这可能对您有所帮助

clearAlerts: function() {
        for(var x in this.alerts) {
           delete this.alerts[x];
        }
    }

请查看此Demo

答案 1 :(得分:0)

您可以在所有控制器中继承控制器。 它仍然涉及你让你的所有控制器成为父控制器的子项,但除此之外它将完美地工作。

控制器继承是这样完成的:

app.controller('ParentCtrl', function ($scope) {
    "use strict";
    $scope.$on("$destroy", function (event, val) {
        alert("Controller Destoryed");
    });
});

app.controller('ChildCtrl', ['$scope', '$controller', function ($scope, $controller) {
    "use strict";
    $controller('ParentCtrl', {$scope: $scope});
}]);

以下是plunkr demo(请注意$destory上广播$scope事件,因此此示例的工作方式与广播$destroy事件完全相同)