我有以下指令：
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，在这种情况下它将替换整个元素），并且根据指令范围评估模板的内容。
您可以使用传递给编译的 transinclude 参数来执行您想要执行的操作（请参阅文档 https://docs.angularjs.org/api/ng/service/%24compile），但这已被弃用，所以我不建议走那条路。
这是一个普朗克 http://plnkr.co/edit/55hj13LTgDWNiWwfNqCT?p=preview在那里你可以玩一些变化。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
