我正在学习 AngularJS。
我经历了这个video ，这里显示将 ng-transclude 放在指令模板中的标签上，将在该标签中附加已经存在的 DOM 内容。
代码:
<html ng-app="myApp">
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body ng-controller="AppCtrl">
<panel>
<button>Click Me</button>
</panel>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('AppCtrl', function() {
});
app.directive('panel', function() { //can return a function (link) or an object
return {
restrict: 'E',
transclude: true,
template: '<span> This is my custom span</span><div class="panel" ng-transclude>this is my div</div><span>Another span follows</span>'
}
});
</script>
</body>
</html>
这是 fiddle , 证明问题。
最佳答案
这是最新版本的正常行为。
来自 Angular API on ng-transclude .
"Any existing content of the element that this directive is placed on will be removed before the transcluded content is inserted."
如果您使用 Angular 1.0.8 版运行您的 fiddle ，那么它将像视频中那样工作。
关于javascript - ng-transclude 替换内容而不是追加，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22132849/