AngularJs 指令directive之transclude

transclude - 编译元素的内容，使它能够被directive所用。需要(在模版中)配合ngTransclude使用(引用)

先看例子，index.JS代码：

Java代码  

  1. var appModule = angular.module('app', []);  
  2. appModule.directive('hello', function() {  
  3.     return {  
  4.         restrict: 'E',  
  5.         template: '<div>Hi there <span ng-transclude></span></div>',  
  6.         transclude: true  
  7.     };  
  8. });  

 html

Java代码  

  1. <html ng-app='app'>  
  2. <head>  
  3.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
  4. </head>  
  5. <body>  
  6. <hello>  
  7.     <br/>  
  8.     <span>原始的内容，</span><br/>  
  9.     <span>还会在这里。</span>  
  10. </hello>  
  11. <hello>  
  12. </hello>  
  13. </body>  
  14.   
  15. <script type="text/javascript" src="../vendor/angular/angular.js"></script>  
  16. <script type="text/javascript" src="app/index.js"></script>  
  17. </html>  

 运行结果

 firebug再看页面代码变成了

Java代码  

  1. <hello>  
  2. <div>Hi there   
  3. <span ng-transclude="">  
  4.     <br/>  
  5.     <span>原始的内容，</span><br/>  
  6.     <span>还会在这里。</span>  
  7. </span>  
  8. </div>  
  9. </hello>  
  10. <hello <div="">Hi there   
  11. <span ng-transclude="">  
  12. </span>  
  13. </hello>  
时间： 2024-09-12 07:09:18

AngularJs 指令directive之transclude的相关文章

AngularJs 指令directive之require

controller的用法分为两种情形,一种是require自定义的controller,由于自定义controller中的属性方法都由自己编 写,使用起来比较简单:另一种方法则是require AngularJS内建的指令,其中大部分时间需要require的都是ngModel这个指令. 在自定义Angular指令时,其中有一个叫做require的字段,这个字段的作用是用于指令之间的相互交流.举个简单的例子,假如我们现在需要编写两 个指令,在linking函数中有很多重合的方法,为了避免重复自己

AngularJs 指令directive之controller，link，compile

关于自定义指令的命名,你可以随便怎么起名字都行,官方是推荐用[命名空间-指令名称]这样的方式,像ng-controller.不过你可千万不要用 ng-前缀了,防止与系统自带的指令重名.另外一个需知道的地方,指令命名时用驼峰规则,使用时用-分割各单词.如:定义myDirective,使用时 像这样:<my-directive>. 这里列出directive的合法命名: ng:bind ng-bind ng_bind x-ng-bind data-ng-bind 我是教师,在新建试题输入分数的时候

AngularJS Slider指令(directive)扩展

继上一篇基于jQuery UI Autocomplete的AngularJS 指令(directive)扩展,在这里发布一个AngularJS的Slider扩展.如 果你还不了解AngularJS话的情参见AngularJs - Javascript MVC 框架,Angular-Bootstrap和Compiler以及Google-AngularJS 官方文档. jsfiddle演示:http://jsfiddle.net/whitewolf/vNfsm/20/embedded/: html:

基于jQuery UI Autocomplete的AngularJS 指令（directive）扩展

      在前几篇随笔简单介绍了AngularJS,在AngularJS 指令(directive)是重要的概念,主要负责了很大部分的组建样式交互.在前面介绍过directive需要预先的模板编译在返回一个link的函数,注册行为事件交互等等.在这里不多说了,关于指令的介绍将在后续一并补上.在这里我们先看一个利用jQuery UI组件开发的AngularJS Autocomplete指令. 代码:jsfiddle在线测试 Directive:    1 var oldSuggest = jQu

Angularjs使用directive自定义指令实现attribute继承的方法详解_AngularJS

本文实例讲述了Angularjs使用directive自定义指令实现attribute继承的方法.分享给大家供大家参考,具体如下: 一.Html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&

AngularJS中directive指令使用之事件绑定与指令交互用法示例_AngularJS

本文实例讲述了AngularJS中directive指令使用之事件绑定与指令交互用法.分享给大家供大家参考,具体如下: AngularJS中模板的使用,事件绑定以及指令与指令之间的交互 <!doctype html> <html ng-app="myapp"> <head> <meta charset="utf-8"/> </head> <body ng-controller="Shield

AngularJS 指令的交互详解及实例代码_AngularJS

背景介绍 这例子是视频中的例子,有一个动感超人,有三种能力,力量strength,速度speed,发光light. 这三种能力作为三种属性,定义动感超人作为一个标签,只要添加对应的属性就能拥有该能力. 为了便于结果的展示,为标签添加鼠标的响应事件,当鼠标移动到对应的标签上就会触发一个方法,打印出具备的能力. 程序分析 html部分的代码如下:        <div> <superman>nothing!</superman> <superman strength

AngularJs 指令详解及示例代码_AngularJS

对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能. 首先来看个完整的参数示例再来详细的介绍各个参数的作用及用法: angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priority: Number, terminal: Boolean, template: String or Template Function: func

理解AngularJs指令_AngularJS

对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能. 首先来看个完整的参数示例再来详细的介绍各个参数的作用及用法: angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priority: Number, terminal: Boolean, template: String or Template Function: func