创建可在应用初始化时配置默认设置的AngularJS指令

嘿，这个需求在AngularJS里挺常见的，咱们可以通过服务+指令的组合来完美解决——既支持在应用初始化时配置全局默认值，又能让单个指令实例灵活覆盖这些默认。我给你一步步拆解实现方式：

1. 先搞个全局配置服务 #

我们需要一个专门的服务来存储指令的默认配置，同时提供方法让我们在应用启动时修改这些全局默认值：

angular.module('myApp')
  .service('MyDirectiveConfig', function() {
    // 指令的基础默认值（可以理解为指令自带的兜底配置）
    this.defaults = {
      backgroundColor: '#ffffff',
      fontSize: '14px',
      showLabel: true
    };

    // 提供修改全局默认的方法，传入自定义配置会合并覆盖原有默认
    this.setDefaults = function(customDefaults) {
      angular.extend(this.defaults, customDefaults);
    };
  });

2. 在应用初始化时设置全局默认 #

用AngularJS的run块，在应用刚启动的时候调用配置服务的方法，设置应用级的全局默认：

angular.module('myApp')
  .run(function(MyDirectiveConfig) {
    // 这里就是你的应用级全局配置，会覆盖服务里的初始默认
    MyDirectiveConfig.setDefaults({
      backgroundColor: '#f5f5f5',
      fontSize: '16px'
    });
  });

3. 实现指令，自动合并配置 #

接下来写指令，注入刚才的配置服务，然后把指令兜底默认 → 全局默认 → 实例传入属性按优先级合并（实例属性优先级最高）：

angular.module('myApp')
  .directive('myCustomDirective', function(MyDirectiveConfig) {
    return {
      restrict: 'E',
      scope: {
        // 用?标记属性为可选，没传的话不会报错
        backgroundColor: '@?',
        fontSize: '@?',
        showLabel: '=?'
      },
      link: function(scope, element, attrs) {
        // 合并配置：顺序很重要，后面的会覆盖前面的
        var finalConfig = angular.extend(
          {}, 
          MyDirectiveConfig.defaults, // 先拿全局默认
          scope // 再拿实例传入的属性，覆盖全局默认
        );

        // 把最终配置同步回scope，供模板使用
        angular.extend(scope, finalConfig);

        // 举个例子：根据配置操作DOM
        element.css({
          'background-color': scope.backgroundColor,
          'font-size': scope.fontSize
        });

        if (!scope.showLabel) {
          element.find('.directive-label').hide();
        }
      },
      template: `
        <div class="directive-wrapper">
          <span class="directive-label" ng-if="showLabel">我的自定义指令</span>
          <ng-transclude></ng-transclude>
        </div>
      `,
      transclude: true
    };
  });

4. 实际使用指令 #

现在不管你在页面里怎么用这个指令，没传入的属性都会自动用全局默认值，需要自定义的地方单独传就行：

<!-- 完全用全局默认值 -->
<my-custom-directive>
  这是用全局默认的指令实例
</my-custom-directive>

<!-- 覆盖部分属性，其他沿用全局默认 -->
<my-custom-directive background-color="#ff4444" show-label="false">
  这是自定义了背景色和隐藏标签的实例
</my-custom-directive>

• 如果你的配置逻辑更复杂，比如需要在config块里就配置（而不是run块），可以把服务改成provider，这样能更早地进行全局配置。
• angular.extend的合并顺序一定要注意，确保实例属性能覆盖全局，全局能覆盖指令兜底默认。

内容的提问来源于stack exchange，提问作者Ron Harlev