AngularJS中的transclusion類似於包含關係。
通常,這樣定義一個directive:
<mydirective someprop=""></mydirective>
轉換成html可能是這樣的:
<div>
<div class="someclass">
</div
</div>
現在,想在類名為someclass的div中放置一些動態內容,即:
<div>
<div class="someclass">
這裡有一些動態內容
</div
</div>
如何做到呢?
1、在template中通過屬性或者元素的方式標記放置動態內容的位置,比如<ng-transclude></ng-transclude>
2、在directive的返回物件中增加transclude: true
假設,有這樣的一個Directive:
(function(){ var transclusion = function(){ var template = '<div>Name:<input type="text" ng-model="vm.title"/> ' + '<button ng-click="vm.addTask()">Add Task</button>' + '<div class="taskContainer"><br/>' + '<ng-transclude></ng-transclude>' + '</div></div>', controller = function(){ var vm = this; vm.addTask = function(){ if(!vm.tasks) vm.task = []; vm.tasks.push({ title: vm.title }); } }; return { restrict: 'E', transclude: true, scope: { tasks:'=' }, controller: controller, controllerAs: 'vm',] bindToController: true, template: template } }; angular.module('direcitiveModule') .directive('transclusion', transclusion); }());
在頁面大致這樣使用:
<transclusion tasks="tasks"> <div ng-repeat="task in tasks track by $index"> <strong>{{task.title}}</strong> </div> </transclusion> $scope.tasks = [{title: 'Task 1'}];