logo标签列表

一个 Angular 指令的 compile() 函数如何访问一个隔离作用域？

angularjsangularjs-directiveangularjs-scope
5

我有以下指令：

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}}。
我想知道由compile()创建的新HTML代码如何访问链接函数$scope。
1个回答
5
这种方法行不通，因为{{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，在这种情况下，它将替换整个元素），并且模板的内容将根据指令作用域进行评估。
您可以使用传递给编译的transclude参数来完成您尝试做的事情（{{link1：请参阅文档}}），但是此方法已被弃用，因此我不建议沿着这条路走。
{{link2：这里有一个Plunk} }，您可以在其中尝试一些变化。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接