AngularJS中的transclusion案例

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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‘}];

 

以上是关于AngularJS中的transclusion案例的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS路由使用案例

AngularJS基于MVC的复杂操作案例

angularJs案例汇总

angular js 综合笔记案例

AngularJs最简单解决跨域问题案例

Anjular+Bootstrap前端开发案例实战