Question

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

如果我在应用程序中使用蓝牙，我有一个返回的服务。我希望能够在屏幕上的图标中显示它们。我似乎读到了操纵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中使用函数时，重要的是它们尽可能简单，因为它们有时会被称为每个摘要周期多次。

但我可以随时监控该变量的变化吗？该值仅在开始时定义，并且在整个应用程序中不会更改

如果表达式在设置后不会改变，则它是one-time binding的候选者：

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

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

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

但在html中我可以直接访问该服务吗？还是我必须继续使用控制器？

可以使用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>

原谅我问你。但这是一个好习惯吗？

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

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

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

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

1 个答案:

用法：

用法：

用法：