浅析AngularJS自定义指令之嵌入(transclude)
AngularJS自定义指令的嵌入功能与vue的插槽十分类似，都可以实现一些自定义内容展现。在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transclude。
transclude:
true: 表示指令元素内容（子元素）会被嵌入。
element: 表示整个元素会被嵌入，包括哪些尚未被编译的属性指令。ng-repeat指令就是这种模式
ng-transclude：
ng-transclude指令会得到嵌入元素，然后将嵌入元素追加到模板元素中ng-transclude所在的位置。这是嵌入最简单、最常见的用法。
ng-transclude类似于vue中的slot，指明自定义元素插入的位置。具体代码实现如下
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>transclude</title>
<script src="https://cdn.bootcss.com/angular.js/1.3.1/angular.js"></script>
</head> <body ng-app="transclude" ng-controller="TranscludeCtrl">
<!-- 嵌入HTML片段作用域为ng-repeat产生的item的作用域，能够访问item里面的变量 -->
<alert type="alert.type" close="closeAlert($index)" ng-repeat="alert in alerts">
{{alert.msg}}
</alert>
</body>
<script>
var myApp = angular.module('transclude', []);
myApp.controller('TranscludeCtrl', function($scope) {
$scope.alerts = [{
type: 'primary',
msg: '你是谁'
}, {
type: 'default',
msg: '不知道'
}, {
type: 'danger',
msg: '真的假的'
}]; $scope.closeAlert = function($index) {
$scope.alerts.splice($index, 1);
}
})
myApp.directive('alert', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
template: `<div class="alert alert-{{type}}">
<button type="button" class="close" ng-click="close()">×</button>
<div ng-transclude></div>
</div>`,
scope: { //获取指令生效作用域变量
type: '=',
close: '&'
}
}
})
</script> </html>
运行结果如下：
如果设置transclude为element，它会将整个指令元素插入进去，运行结果如下：
浅析AngularJS自定义指令之嵌入(transclude)的更多相关文章
- AngularJs自定义指令详解（1） - restrict
下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...
- AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- angularjs自定义指令Directive
今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...
- angularJs 自定义指令传值---父级与子级之间的通信
angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...
- AngularJs自定义指令详解（4） - transclude
transclude默认值为false,如果设置 transclude为true,那么相应地,必须在模板代码中加入ng-transclude指令. 先看个例子: <!DOCTYPE html&g ...
- angularJS——自定义指令
主要介绍指令定义的选项配置 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDirectiv ...
- 利用angularJs自定义指令（directive）实现在页面某一部分内滑块随着滚动条上下滑动
最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(d ...
- angularJs自定义指令（directive）实现滑块滑动
最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(d ...
- AngularJs自定义指令详解（6） - controller、require
在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...
随机推荐
- 《剑指offer》 二进制中1的个数
本题来自<剑指offer> 二进制中1的个数 题目: 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 思路: 两种思路: 第一种:对n进行左移,检测最后一位是否为1,但考 ...
- java方法重载和重写
1.java的方法重载和重写,表示两种不同的类型.this关键字,出现在类的构造方法中,代表使用该构造方法所创建的对象.,this可以出现在实例方法中核构造方法中.但是不能出现在类方法中.实例方法只能 ...
- Nginx详解十四：Nginx场景实践篇之代理服务
代理的作用 Nginx代理 正向代理 反向代理 正向代理和反向代理的区别:代理的对象不一样 正向代理代理的对象是客户端,反向代理代理的对象是服务端 反向代理: 配置语法:proxy_pass URL; ...
- Loadrunner常用目录、组成部分及负载测试流程
常用目录 bin:存放一些可执行程序 classes:可能用到的jar包 My Template:存放一些自己创建的模板 include:头文件(可以编写自定义函数,保存成.h的头文件形式并放在这个目 ...
- WPF应用程序内存泄漏的一些原因
原文:Finding Memory Leaks in WPF-based applications There are numbers of blogs that folks wrote about ...
- webpack学习笔记--其它配置项
其它配置项 除了前面介绍到的配置项外,Webpack 还提供了一些零散的配置项.下面来介绍它们中常用的部分. Target JavaScript 的应用场景越来越多,从浏览器到 Node.js,这些 ...
- yum安装mongodb
1.创建mongodb.repo文件 在/etc/yum.repos.d/目录下创建文件mongodb.repo,它包含MongoDB仓库的配置信息,内容如下: 复制代码代码如下: [mongodb] ...
- codeforces 1037
题解: E-trips 哎哎哎好傻逼啊 没有想到算不能的一直在想怎么算能的 太傻逼了 其实很简单 我们只需要对好友<=k的首先dfs一下给他连接着的朋友-1 然后如果小于了就递归下去 这个正确性 ...
- Get与Post区别小结
Get:是以实体的方式得到由请求Url所指定资源的信息,如果请求Url只是一个数据产生过程,那么最终要在实体中返回的是处理过程的结果所指向的资源,而不是处理过程的描述. Post:是用来向 ...
- Json常用组件
Json2.js 开发者:json官网:http://www.json.org/. 适用环境:用于在不支持JSON对象的浏览器(通常是国内使用IE内核的第三方浏览器)下使用.json2.js提供了 ...