AngularJS选项卡通知

在AngularJS中实现带有通知计数的选项卡功能，可以通过自定义指令、服务以及与AngularJS UI Bootstrap（如果使用的话）结合来完成。下面是一个基本的实现思路：

1. 创建一个警报服务

首先，创建一个服务来管理你的警报数据。这个服务可以用来存储和更新每个选项卡相关的警报数量。

angular.module('app').factory('AlertService', function() {
    var alerts = {
        'TAB_ONE': 0,
        'TAB_TWO': 0,
        'TAB_THREE': 0
    };

    return {
        incrementAlerts: function(tabName) {
            if (alerts.hasOwnProperty(tabName)) {
                alerts[tabName]++;
            }
        },
        decrementAlerts: function(tabName) {
            if (alerts.hasOwnProperty(tabName) && alerts[tabName] > 0) {
                alerts[tabName]--;
            }
        },
        getAlertCount: function(tabName) {
            return alerts[tabName] || 0;
        }
    };
});

2. 创建一个选项卡通知指令

接下来，创建一个自定义指令来显示选项卡上的通知计数。这个指令会依赖于上面创建的AlertService来获取和显示警报数量。

angular.module('app').directive('tabAlerts', ['AlertService', function(AlertService) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$watch(attrs.tabName, function(newValue) {
                if (newValue) {
                    var alertCount = AlertService.getAlertCount(newValue);
                    if (alertCount > 0) {
                        element.append(' (' + alertCount + ')');
                    } else {
                        // 如果没有警报，移除之前的计数
                        element.contents().filter(function() {
                            return this.nodeType === 3 && /\(\d+\)/.test(this.nodeValue);
                        }).remove();
                    }
                }
            });
        }
    };
}]);

3. 在HTML中应用

最后，在你的HTML模板中使用这个指令来为每个选项卡添加通知计数。

<div ng-app="app">
    <div ng-controller="TabController">
        <button type="button" ng-class="{active: isSelected(1)}" ng-click="selectTab(1)" tab-alerts="TAB_ONE">TAB_ONE</button>
        <button type="button" ng-class="{active: isSelected(2)}" ng-click="selectTab(2)" tab-alerts="TAB_TWO">TAB_TWO</button>
        <button type="button" ng-class="{active: isSelected(3)}" ng-click="selectTab(3)" tab-alerts="TAB_THREE">TAB_THREE</button>
        
        <!-- 实现TabController逻辑以控制选项卡选择及警报服务调用 -->
    </div>
</div>

4. 控制器逻辑

别忘了在控制器中实现selectTab和isSelected方法，并在适当的时候调用AlertService的incrementAlerts和decrementAlerts方法来更新警报计数。

angular.module('app').controller('TabController', ['$scope', 'AlertService', function($scope, AlertService) {
    $scope.selectedTab = 1;

    $scope.selectTab = function(tabId) {
        $scope.selectedTab = tabId;
        // 可以在这里根据需要调用AlertService的相应方法
    };

    $scope.isSelected = function(tabId) {
        return $scope.selectedTab === tabId;
    };
    
    // 示例：增加警报
    AlertService.incrementAlerts('TAB_ONE');
}]);

这样，每当有新的警报时，你就可以通过调用AlertService的方法来更新计数，并且这些变化会自动反映在UI上。记得根据实际需求调整服务、指令和控制器中的逻辑。