浅析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,目的往往是要 ...
随机推荐
- IOS 命令行工具开发
例子 我们需要查看手机APP里面的某个应用的架构 新建一个Single View App 的ios项目 ToolCL 然后在 main函数中加入以下代码 // // main.m // ToolCL ...
- GIL锁
GIL锁 在CPython中,这个全局解释器锁,也称 ...
- mysql老是停止运行该怎么解决
你可能还会遇到无法启动mysql的错误 解决方法如下:
- 基于BootStrap的Collapse折叠(包含回显展开折叠的对应状态)
情况描述:为了改善页面上的input框太多,采用∧∨折叠展开,这个小东西来控制,第一次做,记录一下ヾ(◍°∇°◍)ﾉﾞ下边是Code 代码: //html代码 <div id="col ...
- Nginx + tomcat服务器 负载均衡
Nginx 反向代理初印象 Nginx (“engine x”) 是一个高性能的HTTP和反向代理 服务器,也是一个IMAP/POP3/SMTP服务器.其特点是占有内存少,并发能力强,事实上nginx ...
- Jmeter-JDBC Request参数化
一.参数化 1.选择Query Type(查询类型)为Prepared Select Statement 2.写好sql 3.在Parameter Values中输入参数,多个参数用‘,’隔开 4.P ...
- python调用PHP方法
PHP代码如下:<?php $method = $argv[1]; $param1 = $argv[2]; $param2 = $argv[3]; if(isset($method) & ...
- MVC开发中的常见错误-02-在应用程序配置文件中找不到名为“OAEntities”的连接字符串。
在应用程序配置文件中找不到名为“OAEntities”的连接字符串. 分析原因:由于Model类是数据库实体模型,通过从数据库中引用的方式添加实体,所以会自动产生一个数据库连接字符串,而程序运行到此, ...
- 20165323《Java程序设计》第九周学习总结
一.教材内容学习总结 URL类 1.URL 类是 java.net 包中的一个重要的类,使用 URL 创建对象的应用程序称为客户端程序. 2.一个 URL 对象通常包含最基本的三部分信息:协议.地址和 ...
- C/C++遍历二维数组，列优先(column-major)比行优先(row-major)慢，why？
C/C++遍历二维数组,列优先(column-major)比行优先(row-major)慢,why? 简单粗暴的答案:存在Cache机制! 稍微啰嗦一点:CPU访问内存(读/写,遍历数组的话主要是读) ...