AngularJS：动态创建指令属性后如何触发指令执行？

你的问题核心在于Angular在页面初始化时已经完成了DOM的编译和指令解析，之后通过Factory手动添加的指令属性不会被自动识别——因为Angular不会主动重新扫描DOM。另外你的代码还有几个基础错误需要先修正，下面一步步来解决：

先修正代码里的基础错误 #

1. 指令模块重复创建 #

在你的Directive文件里，angular.module('myApp', [])会重新创建一个新的模块，而不是获取已经在Controller/Factory里定义好的myApp模块。应该改成不带第二个参数的形式来获取已存在的模块：

namespace std{ 
  // 去掉[]，获取已有的myApp模块
  var app = angular.module('myApp'); 
  app.directive('directiveTag', function () { 
    return { 
      restrict: 'A', // 你要的是属性指令，所以这里改成'A'，不是'E'
      link: function (scope, element, attribute) { 
        console.log('Hola!');
        // 给元素绑定点击事件，实现需求
        element.on('click', () => {
          console.log('Hola!!');
        });
      } 
    }; 
  }); 
}

2. 指令命名规范 #

Angular的指令定义需要用驼峰命名法，对应DOM中的短横线分隔符。比如你要在DOM里用directive-tag属性，指令名就得定义成directiveTag——JS里不能有带连字符的标识符。

3. 指令的restrict设置 #

你要的是属性型指令，所以restrict应该设为'A'（默认也是'A'，但显式写更清晰），而不是'E'（元素型指令，对应<directive-tag></directive-tag>标签）。

解决“动态添加指令后不生效”的核心问题 #

要让动态添加的指令属性被Angular识别，需要用Angular的$compile服务重新编译目标元素。另外，不要在Factory里直接操作DOM——Factory的职责是提供数据/工具方法，DOM操作应该放在控制器或者指令里。

修改后的完整代码如下：

Controller文件 #

namespace angular { 
  var app = angular.module('myApp'); 
  app.controller('myController', myController); 
  myController.$inject = ['myFactory', '$compile', '$scope'];
  export class myController { 
    constructor(private myFactory: any, private $compile: any, private $scope: any) { 
      console.log('myController Constructor Called');
      // 获取目标元素（用angular.element包装，符合Angular操作规范）
      const demoElement = angular.element(document.getElementById("demo"));
      // 添加指令属性
      demoElement.attr("directive-tag", "");
      // 重新编译元素，让Angular识别新的指令
      $compile(demoElement)($scope);
    } 
  }
}

Factory文件（简化，不再操作DOM） #

namespace angular { 
  var app = angular.module('myApp'); 
  app.factory('myFactory', function () { 
    // Factory只提供必要的方法/数据，DOM操作交给控制器
    return {
      // 如果需要可以在这里定义工具方法
    }; 
  }); 
}

Directive文件（修正后） #

namespace std{ 
  var app = angular.module('myApp'); 
  app.directive('directiveTag', function () { 
    return { 
      restrict: 'A',
      link: function (scope, element, attribute) { 
        console.log('Hola!');
        // 绑定点击事件，实现需求
        element.on('click', () => {
          console.log('Hola!!');
          // 如果涉及到Angular作用域数据更新，需要手动触发脏检查
          scope.$apply();
        });
      } 
    }; 
  }); 
}

index.html（无需修改） #

<html ng-app='myApp'> 
<body ng-controller='myController'> 
<div id="demo"> Clicking here should console Hola!! </div> 
<!-- 按顺序引入脚本：先angular.js，再Controller，Factory，Directive -->
</body> 
</html>

原理说明 #

1. $compile服务会重新解析元素上的指令属性，生成对应的指令链接函数并执行，这样动态添加的指令就能生效。
2. 必须在Angular的上下文里使用$compile，不能直接用原生DOM操作后就不管——Angular的指令绑定完全依赖它的编译和链接流程。
3. 当在指令里用原生事件（比如element.on('click')）修改了Angular作用域的数据时，需要调用scope.$apply()来触发脏检查，确保视图同步更新。

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