一、AngularJS 自定义指令核心解析

在AngularJS框架中，自定义指令（Directive）是扩展HTML语义的核心技术，允许开发者创建可复用的UI组件。通过指令封装，可将复杂UI逻辑转化为声明式标签，大幅提升开发效率。

1.1 指令创建基础结构

<script>
angular.module('app', [])
.directive('aliCloudCard', function() {
  return {
    restrict: 'E',          // 指令类型：元素(E)/属性(A)/类(C)
    templateUrl: 'card.html', // 模板路径
    scope: {                // 独立作用域
      title: '@',           // 字符串绑定
      config: '='           // 双向数据绑定
    },
    link: function(scope, element) {
      // DOM操作逻辑
      element.find('.header').css('background', '#00a1d6');
    }
  };
});
</script>

<!-- 使用示例 -->
<ali-cloud-card 
  title="云服务器ECS" 
  config="serverConfig">
</ali-cloud-card>

1.2 核心配置项说明

• restrict：定义指令使用方式（EACM组合）
• scope隔离：@单向绑定 / =双向绑定 / &事件传递
• link函数：DOM操作与事件监听入口
• transclude：内容投影保留原始内容

二、实战：云服务监控面板指令

结合阿里云场景，创建服务器状态监控组件：

<script>
.directive('serverMonitor', function() {
  return {
    restrict: 'E',
    template: `
      <div class="monitor-panel">
        <h3>{{serverName}} 状态</h3>
        <div class="cpu-gauge">CPU: {{cpuUsage}}%</div>
        <div ng-transclude></div>
      </div>`,
    transclude: true,
    scope: {
      serverName: '@',
      cpuUsage: '='
    },
    link: function(scope) {
      // 模拟实时数据更新
      setInterval(() => {
        scope.cpuUsage = Math.random() * 100;
        scope.$apply();
      }, 2000);
    }
  };
});
</script>

<!-- 调用示例 -->
<server-monitor 
  server-name="香港节点ECS" 
  cpu-usage="liveData.cpu">
  <!-- 透传内容 -->
  <button ng-click="restart()">重启实例</button>
</server-monitor>