$compile() 不会在自定义 Angular 指令中触发

Question

我有以下指令：

angular.module("example_module", [])
.directive("example_directive", function() {
  return {
    compile: function(element) {
      element.html('{{example}}');
      return function($scope) {
        $scope.example = "Hello world";
      };
    }
  };
});

和以下 HTML 代码：

<!DOCTYPE html>
<html ng-app="example_module">
  <head>
    <meta charset="utf-8">
    <title>Example title</title>
    <script src="lib/angular/angular.min.js"></script>
    <script src="js/example.js"></script>
  </head>
  <body>
    <div example_directive></div>
  </body>
</html>

我希望该指令编译为 Hello world，但它编译为一个空字符串。哪里出错了？

我可以使用 template 或 link 函数，但我的目标是了解 compile 函数的工作原理。

Answer 1

这与 angular 处理指令名称的方式有关。我已经更改了您的示例以匹配 angular 的命名约定并将 Plunk

放在一起

angular.module("example_module", [])
.directive("exampleDirective", function() {
  return {
    compile: function(element) {
      element.html('{{example}}');
      return function($scope) {
        $scope.example = "Hello world";
      };
    }
  };
});

<body>
    <div example-directive></div>
</body>

$compile() 不会在自定义 Angular 指令中触发

$compile() does not fire in custom Angular directives

angularjs

angularjs-directive

angularjs-scope