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案例的更多相关文章

  1. 彻底弄懂AngularJS中的transclusion

    点击查看AngularJS系列目录 彻底弄懂AngularJS中的transclusion AngularJS中指令的重要性是不言而喻的,指令让我们可以创建自己的HTML标记,它将自定义元素变成了一个 ...

  2. AngularJS中module的导入导出

    关于AngularJS中module的导入导出,在Bob告诉我之前还没写过,谢谢Bob在这方面的指导,给到我案例代码. 在AngularJS实际项目中,我们可能需要把针对某个领域的各个方面放在不同的m ...

  3. AngularJS中transclude用法详解

    这篇文章主要介绍了AngularJS中transclude用法,详细分析了transclude的具体功能.使用技巧与相关注意事项,需要的朋友可以参考下 本文实例讲述了AngularJS中transcl ...

  4. AngularJS中get请求URL出现跨域问题

    今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...

  5. AngularJS 中的Promise --- $q服务详解

    先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...

  6. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  7. 关于angularjs中的jQuery

    关于angularjs中的jQuery 下面是一个小例子,用来说明我经常看到的一种模式.我们需要一个开关型的按钮.(注意:这个例子的代码有点装逼,并且有点冗长,只是为了用来代表更加复杂一些的例子,这些 ...

  8. angularjs中的directive scope配置

    angularjs中的directive scope配置 定义directive其中重要的一环就是定义scope,scope有三种形式: 默认的scope,DOM元素上原有的scope scope: ...

  9. angularjs中provider,factory,service的区别和用法

    angularjs中provider,factory,service的区别和用法 都能提供service,但是又有差别 service 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...

随机推荐

  1. 搭建ssh框架项目(五)

    一.控制层优化 (1)创建BaseAction.java类 package com.cppdy.ssh.web.action; import javax.servlet.http.HttpServle ...

  2. LeetCode(42):接雨水

    Hard! 题目描述: 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水. 上面是由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表示的高度 ...

  3. PHP时间类完整实例

    <?php header("Content-type:text/html;Charset=utf-8"); class time{ private $year;//年 pri ...

  4. web----WSGI

    概念: WSGI协议其实是定义了一种server与application解耦的规范 WSGI规范简单理解:一方面给Server提供接口,凡是以这种接口的web服务器,都是遵循WSGI规范的 另一方面给 ...

  5. 获取更新元素文本html()

    html() 方法,获取元素文本,包含元素标签,也可以设置元素的文本值(包含元素标签),还可以包含子元素标签.相当于JavaScript中的innerHTML. <!DOCTYPE html&g ...

  6. 彻底解决:java.sql.SQLException: Incorrect string value: '\xF0\x9F\x92\x94' for column 'name' at row 1

    转载:https://blog.csdn.net/qq_31122833/article/details/83992085

  7. 【UER #1】DZY Loves Graph(待卡常数)

    题解: 正解是可持久化并查集 但这个显然是lct可以维护的 但这常数是个问题啊??? #include <bits/stdc++.h> using namespace std; struc ...

  8. python小知识-__call__和类装饰器的结合使用,数据描述符__get__\__set__\__delete__(描述符类是Python中一种用于储存类属性值的对象)

    class Decorator(): def __init__(self, f): print('run in init......') self.f = f def __call__(self, a ...

  9. Django ORM OneToOneField

    一对一关系 一对一关系与多对一关系非常相似.如果你在模型中定义一个OneToOneField,该模型的实例将可以通过该模型的一个简单属性访问关联的模型. class Person(models.Mod ...

  10. ATM+购物车商城

    模拟实现一个ATM + 购物商城程序 额度 15000或自定义 实现购物商城,买东西加入 购物车,调用信用卡接口结账 可以提现,手续费5% 支持多账户登录 支持账户间转账 记录每月日常消费流水 提供还 ...