Angular指令compile（）函数如何访问隔离的作用域？

狂热的

我有以下指令：

angular.module("example_module", [])
.directive("mydirective", function() {
  return {
    scope: { data: "@mydirective" }
    compile: function(element) {
      element.html('{{example}}');
      return function($scope) {
        $scope.example = $scope.data + "!";
      };
    }
  };
});

以及以下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 mydirective="Hello world"></div>
  </body>
</html>

我希望指令可以编译为Hello world!，但是它可以编译为空字符串。scope创建一个孤立的范围，似乎无法实现{{example}}。

我想知道由创建的新HTML代码如何compile()访问链接功能$scope。

乔·恩斯明格

这是行不通的，因为{{example}}是针对父作用域进行评估的，这很有意义，因为在编译之前您实际上将元素更改为：

<div>{{example}}<div>

您可以通过将'$ scope.example ='替换为'$ scope。$ parent.example ='来进行验证（仅出于演示目的-使用$ parent不是最佳实践）。

您真正想要做的是类似于包含的操作，但是有很简单的方法可以做到。例如：

angular.module("example_module", [])
.directive("mydirective", function() {
  return {
    restrict: 'A',
    scope: { data: "@mydirective" },
    template: '{{example}}',
    compile: function(element) {
      return function($scope) {
        console.log($scope.data);
        $scope.example = $scope.data + "!";
        console.log($scope.example);
      };
    }
  };
});

使用模板时，它将替换指令所应用的元素的内容（除非使用replace：true，在这种情况下它将替换整个元素），并且模板的内容将根据指令范围进行评估。

您可以使用传递给compile的transclude参数来执行您要尝试执行的操作（请参阅docs），但这已被弃用，因此我不建议您沿这条路走。

这是一个Plunk，您可以在其中玩一些变化。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。