星空网 > 软件开发 > Java

AngularJS中的transclusion案例

 

AngularJS中的transclusion类似于包含关系。

通常,这样定义一个directive:

<mydirective someprop=""></mydirective>

转换成html可能是这样的:

<div>
    <div >
    </div
</div>

现在,想在类名为someclass的div中放置一些动态内容,即:


<div>
    <div >
        这里有一些动态内容
    </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 ><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案例

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

floatingleaves:https://www.goluckyvip.com/tag/20469.html
干扰流量来源:https://www.goluckyvip.com/tag/2047.html
Flord:https://www.goluckyvip.com/tag/20470.html
flornana:https://www.goluckyvip.com/tag/20471.html
Floryday:https://www.goluckyvip.com/tag/20472.html
Floship:https://www.goluckyvip.com/tag/20473.html
月活用户超20亿!万亿市值巨头对中国商家进一步开闸放流 :https://www.kjdsnews.com/a/1836412.html
九寨沟周围必去的景点推荐:https://www.vstour.cn/a/363190.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流