我有以下指令:
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
。
答案 0 :(得分: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,在这种情况下它将替换整个元素),并且根据指令评估模板的内容范围。
你可以使用传递给compile(see the docs)的transclude参数来做你想做的事情,但是这已被弃用,所以我不建议你走这条路。
Here's a Plunk你可以在那里玩一些变化。