您可以通过将 '$scope.example =' 替换为 '$scope.$parent.example =' 进行验证(仅用于演示目的 - 使用 $parent 不是最佳做法).
您真正想做的是类似于嵌入的事情，但有更简单的方法可以做到.例如:
angular.module("example_module", []).directive("mydirective", function() {返回 {限制:'A'，范围:{数据:@mydirective"}，模板:'{{example}}'，编译:函数(元素){返回函数($scope){控制台日志($scope.data)；$scope.example = $scope.data + "!";控制台日志($scope.example)；};}};});
当您使用模板时，它会替换指令所应用到的元素的内容(除非您使用 replace: true，在这种情况下它会替换整个元素)，并且会根据指令评估模板的内容范围.
你可以使用传递给编译的 transclude 参数做你想做的事情 (请参阅文档)，但这已被弃用，因此我不建议走这条路.
这是一个 Plunk，您可以在其中进行一些变化.
I have the following directive:
angular.module("example_module", [])
.directive("mydirective", function() {
return {
scope: { data: "@mydirective" }
compile: function(element) {
element.html('{{example}}');
return function($scope) {
$scope.example = $scope.data + "!";
};
}
};
});
and the following HTML code:
<!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>
I would expect the directive to compile to Hello world!, but it compiles to an empty string instead. scope creates an isolated scope which seems impossible to reach for {{example}}.
I would like to know how the new HTML code created by compile() can access the link function $scope.
解决方案
This doesn't work because {{example}} is being evaluated against the parent scope, which makes sense, since you are essentially changing the element before compilation to:
<div>{{example}}<div>
You can verify by replacing '$scope.example =' with '$scope.$parent.example =' (for demonstration purposes only - it's not a best practice to use $parent).
What you are really trying to do is something similar to transclusion, but there are very easier ways to do it. For instance:
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);
};
}
};
});
When you use a template, it replaces the content of the element the directive is applied to (unless you use replace: true, in which case it replaces the entire element), and the contents of the template are evaluated against the directive scope.
You could do what you are trying to do using the transclude parameter passed to compile (see the docs), but this has been deprecated so I wouldn't recommend going down that road.
Here's a Plunk where you can play with some variations.
这篇关于Angular 指令 compile() 函数如何访问隔离的作用域?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
