如何使用AngularJS Decorators禁用Blur Admin中的HTML按钮

我来帮你搞定这个需求——不用修改HTML代码，纯靠AngularJS装饰器就能禁用Blur Admin向导里的指定按钮，下面给你两种实用方案：

方案一：装饰$baWizardController修改禁用逻辑 #

如果你想直接接管"上一步"按钮的禁用规则（比如不管当前是不是第一个标签页，都强制禁用），可以通过装饰器重写控制器的isFirstTab方法：

angular.module('BlurAdmin')
  .decorator('$baWizardController', function($delegate) {
    // 先存下原始方法，方便后续需要恢复逻辑时用
    const originalIsFirstTab = $delegate.prototype.isFirstTab;
    
    // 重写方法，让它始终返回true，这样ng-disabled就会一直生效
    $delegate.prototype.isFirstTab = function() {
      // 这里可以加自定义条件，比如根据当前路由、页面状态来决定是否禁用
      // 示例：无条件禁用上一步按钮
      return true;
      
      // 要是需要保留原始逻辑再加额外判断，就这么写：
      // return originalIsFirstTab.call(this) || yourCustomDisableCondition;
    };
    
    return $delegate;
  });

方案二：装饰button指令精准定位目标按钮 #

如果你只想针对.ba-wizard-pager .previous下的按钮单独加禁用规则，不想动控制器的全局逻辑，那就装饰button指令：

angular.module('BlurAdmin')
  .decorator('buttonDirective', function($delegate) {
    const originalLink = $delegate[0].link;
    
    // 重写link函数，在原有功能基础上追加自定义逻辑
    $delegate[0].link = function(scope, element, attrs) {
      // 先调用原始link，确保按钮原有功能正常
      originalLink.apply(this, arguments);
      
      // 判断当前按钮是不是向导的上一步按钮
      if (element.closest('.ba-wizard-pager').length && element.closest('.previous').length) {
        // 示例：直接强制禁用按钮
        element.prop('disabled', true);
        
        // 要是需要动态控制，就监听一个scope变量：
        // scope.$watch('yourCustomDisabledFlag', (newVal) => {
        //   element.prop('disabled', newVal);
        // });
      }
    };
    
    return $delegate;
  });

几个要注意的点 #

• 装饰器一定要注册在BlurAdmin模块（或者依赖它的子模块）里，不然不会生效。
• 方案一适合全局修改向导按钮的禁用逻辑，方案二更灵活，只影响目标按钮，不会碰其他功能。
• 如果用方案一，记得别把控制器的其他逻辑搞坏了——要是需要在某些场景下恢复原始行为，就在重写的方法里加条件判断就行。

内容的提问来源于stack exchange，提问作者Nidhin Kumar