显示蓝牙图标：选用Directive还是Controller？求实现示例

先说说你的Controller实现问题 #

你的当前Controller写法有个明显局限：$scope.showIcon = bluetooth.useBluetooth(); 只会在Controller初始化时执行一次，如果蓝牙状态是动态变化的，这个值不会自动更新，图标也就没法跟着状态变化同步显示/隐藏。

如果一定要用Controller实现，你需要让Service支持状态变化的监听，比如借助AngularJS的$watch或者Service内部的事件广播机制。这里给你一个改进后的Controller示例：

app.controller('BluetoothIconController', function($scope, bluetooth) {
    // 初始化状态
    $scope.showIcon = bluetooth.useBluetooth();
    
    // 用$watch监听蓝牙状态的变化（假设useBluetooth方法会返回最新状态）
    $scope.$watch(function() {
        return bluetooth.useBluetooth();
    }, function(newStatus) {
        $scope.showIcon = newStatus;
    });
});

HTML部分可以保留你原来的写法：

<div ng-controller="BluetoothIconController" ng-show="showIcon"> 
    <img ng-src="ruta"/> 
</div>

但这种方式的问题在于，逻辑和DOM展示耦合度高，要是多个页面都需要这个蓝牙图标，就得重复写相同的监听逻辑，复用性很差。

更推荐的Directive实现方案 #

Directive本来就是用来封装DOM相关操作的，你的这个需求完全适合用Directive实现——它能把蓝牙状态监听和DOM展示封装成一个可复用的独立组件，不用在每个需要的地方重复写Controller逻辑。

实现示例： #

app.directive('bluetoothIcon', function(bluetooth) {
    return {
        restrict: 'E', // 作为自定义元素使用
        template: '<img ng-src="ruta" ng-show="isBluetoothActive"/>',
        link: function(scope) {
            // 初始化蓝牙状态
            scope.isBluetoothActive = bluetooth.useBluetooth();
            
            // 监听蓝牙状态变化（这里模拟两种常见场景）
            // 场景1：如果你的Service支持通过$rootScope广播状态变化事件
            scope.$on('bluetoothStateUpdated', function(event, newState) {
                scope.isBluetoothActive = newState;
            });
            
            // 场景2：如果Service没有事件机制，用$watch定期检查状态
            scope.$watch(function() {
                return bluetooth.useBluetooth();
            }, function(newStatus) {
                scope.isBluetoothActive = newStatus;
            });
        }
    };
});

之后在HTML里直接使用这个指令就行，完全不需要额外写Controller：

<bluetooth-icon></bluetooth-icon>

Directive的核心优势： #

• 复用性强：任何需要显示蓝牙图标的地方，直接插入<bluetooth-icon>标签即可，不用重复编写状态监听逻辑。
• 关注点分离：把DOM展示和蓝牙状态监听的逻辑封装在一起，Controller可以专注于业务逻辑，不用关心DOM细节。
• 维护成本低：以后如果要修改图标路径、样式或者状态判断规则，只需要修改这一个Directive，不用改动多个页面的代码。

总结 #

• 如果蓝牙状态是静态的（初始化后不会改变），你原始的Controller写法也能工作，但灵活性不足。
• 如果蓝牙状态是动态变化的，Controller写法需要额外添加监听逻辑，且复用性差，更推荐用Directive实现，这完全符合AngularJS的设计理念，也更便于后续维护和扩展。

内容的提问来源于stack exchange，提问作者Ivan Paredes