如何显示蓝牙图标——我应该使用指令还是控制器

Question

我应该使用指令还是控制器？

如果我在应用程序中使用或不使用蓝牙，我有一项服务 returns。我希望能够在屏幕上的图标中指示它们。我似乎读到要操纵 DOM，无论是创建元素来修改还是消除它们，都必须使用指令。有人可以给我一个例子，说明如何实施执行此操作的指令。或者使用控制器会更好吗？谢谢

控制器

$scope.showIcon = bluetooth.useBluetooth();

html

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

服务

function useBluetooth() {
        return usaBluetooth;
}

Answer 1

因为 useBluetooth 函数是一个简单的 getter 函数可以被 ng-show 指令直接使用：

$scope.useBluetooth = bluetooth.useBluetooth;

用法：

 <div ng-show="useBluetooth()">
    <img ng-src="ruta"/>
 </div>

在每个摘要周期，ng-show 指令将获取蓝牙状态并相应地显示或隐藏元素。

在 Angular Expressions 中使用函数时，它们尽可能简单很重要，因为有时每个摘要周期都会多次调用它们。

but is it okay that I'm always monitoring the change of that variable? that value is defined only at the beginning and does not change throughout the application

如果表达式一旦设置就不会改变，它是one-time binding的候选者：

 <div ng-show="::useBluetooth()">
    <img ng-src="ruta"/>
 </div>

一次性绑定表达式的主要目的是提供一种创建绑定的方法，一旦绑定稳定，该绑定就会被注销并释放资源。减少正在观看的表达式的数量可以使摘要循环更快，并允许同时显示更多信息。

有关详细信息，请参阅 AngularJS Developer Guide - One-time binding。

but in the html do I have direct access to the service?or do I have to keep using the controller?

A custom directive 可用于将服务置于范围内：

app.directive("useBluetooth", ["bluetooth", function(bluetooth) {
    return {
        link: postLink
    };
    function postLink(scope, elem, attrs) {
        scope.$bluetooth = bluetooth;
    }
}])

用法：

<div use-bluetooth ng-show="::$bluetooth.useBluetooth()">
    <img ng-src="ruta"/>
 </div>

forgive me for asking you. But is that a good practice?

我个人的偏好是使用组件：

app.component("showBluetoothIcon", {
     controller: ['bluetooth', function(bluetooth) {
         this.bluetooth = bluetooth;
     }]),
     template: `
         <img ng-show="$ctrl.bluetooth.useBluetooth()" ng-src="ruta"/>
     `
})

用法：

<show-bluetooth-icon></show-bluetooth-icon>

通过将控制器和模板组合在一个组件中，它变得易于理解、调试、测试和维护。

有关详细信息，请参阅 AngularJS Developer Guide - Understanding Components

如何显示蓝牙图标——我应该使用指令还是控制器

How to display Bluetooth Icon -- should I use a directive or a controller

angularjs

angularjs-directive

我应该使用指令还是控制器？

用法：

用法：

用法：