AngularJS中的transclusion案例

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"/>&nbsp;' +

            '<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'}];