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()">&times;</button>

                 <div ng-transclude></div>

             </div>`,

             scope: { //获取指令生效作用域变量

                 type: '=',

                 close: '&'

             }

         }

     })

 </script>

 </html>

运行结果如下：

如果设置transclude为element，它会将整个指令元素插入进去，运行结果如下：

浅析AngularJS自定义指令之嵌入(transclude)的更多相关文章

  1. AngularJs自定义指令详解（1） - restrict

    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...

  2. AngularJS: 自定义指令与控制器数据交互

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. angularjs自定义指令Directive

    今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...

  4. angularJs 自定义指令传值---父级与子级之间的通信

    angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...

  5. AngularJs自定义指令详解（4） - transclude

    transclude默认值为false,如果设置 transclude为true,那么相应地,必须在模板代码中加入ng-transclude指令. 先看个例子: <!DOCTYPE html&g ...

  6. angularJS——自定义指令

    主要介绍指令定义的选项配置 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDirectiv ...

  7. 利用angularJs自定义指令（directive）实现在页面某一部分内滑块随着滚动条上下滑动

    最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(d ...

  8. angularJs自定义指令（directive）实现滑块滑动

    最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(d ...

  9. AngularJs自定义指令详解（6） - controller、require

    在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...

随机推荐

  1. 限制 Confluence 6 WebDAV 客户端的写入权限

    在早期的 WebDAV 插件中分离了 WebDAV 客户端的写入权限(不能使用,创建/修改,编辑和删除操作)是分开配置的.但是在新版版本的插件中,我们将这些权限合并到了一起. WebDAV 客户端现在 ...

  2. Confluence 6 修改站点图标（favicon）

    你也可以修改你站点的图标(这个站点图标将会在你浏览器的标签页上显示).你需要 Confluence 的管理员权限才能进行修改. 进入  > 基本配置(General Configuration) ...

  3. Matplotlib模块：绘图和可视化

    一.简单介绍Matplotlib 1.Matplotlib是一个强大的Python绘图和数据可视化的工具包 2.安装方法:pip install matplotlib 3.引用方法:import ma ...

  4. cf1108E2 线段树类似扫描线

    /* 有点像扫描线 思路:从左到右枚举每个点,枚举到点i时,把所有以i为起点的区间的影响删去 再加上以i-1为结尾的区间的影响 */ #include<bits/stdc++.h> usi ...

  5. name

    问题 A: name 时间限制: 1 Sec  内存限制: 256 MB 题目描述 lpq同学最近突然对外国人的名字产生了兴趣,特别是外国女生的名字,于是他开始试图去认识一些国外的女生. 随着认识的女 ...

  6. Python之yield简明详解

    yield在Python中被称之为生成器(只能在函数中使用),他的作用是将函数中每次执行的结果以类似元组的形式保存起来一遍后续使用. 什么是生成器? 通过列表生成式,我们可以直接创建一个列表.但是,受 ...

  7. Microsoft Visual Studio Community 2017 修改新建项目的默认位置

    IDE: Microsoft Visual Studio Community 2017 15.5.2 通过修改默认的设置,在下一次新建项目时,就可以节省一些不必要的操作. 菜单:工具 > 选项, ...

  8. java Map按Key排序

    public static void main(String[] args) { Map<String, String> map = new TreeMap<String, Stri ...

  9. Php7有哪些新特性：

    PHP7在PHP5的基础上又做了一次质的提升,当然改变很多,我这里以我的总结简单说下,主要发生了下面这些更改: 移除了一些旧的特性 ZEND引擎升级到Zend Engine 3,也就是所谓的PHP N ...

  10. Description Resource Path Location Type Project configuration is not up-to-date with pom.xml. Select: Maven->Update Project... from the project context menu or use Quick Fix. spark-MT line 1 Maven Co

    1.相信大家新建的maven项目,然后添加好依赖(即修改了pom.xml文件以后就会出现如下所示的错误): Description Resource Path Location Type Projec ...