一个角指令如何编译（）函数访问一个孤立的范围是什么？ [英] How can an Angular directive compile() function access an isolated scope?
问题描述
我有以下指令：
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 code：
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}}.
我想知道如何在新的HTML code。通过创建编译（）可以访问链接功能 $范围。
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>
您可以通过替换'$ scope.example ='验证（仅用于演示目的 - 它不是使用$父最佳实践）$ $范围= parent.example。
You can verify by replacing '$scope.example =' with '$scope.$parent.example =' (for demonstration purposes only - it's not a best practice to use $parent).
你真正想做的是类似的东西transclusion，但也有极容易的方式来做到这一点。例如：
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.
您可以做你正在尝试使用通过transclude参数编译做（看到文档），但pcated所以这一直是德$ p $我不会建议从这条路下来。
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.
这篇关于一个角指令如何编译（）函数访问一个孤立的范围是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
