重复HTML元素

ng-repeat指令可以重复HTML元素

  <body>

    <div ng-app="Home" ng-controller="index">

      <p ng-repeat="x in names">{{x.name}}</p>

    </div>

  </body>

  <script type="text/javascript">

  //实例化应用对象，参数：模块名，空数组

  var app=angular.module("Home",[]);

  //调用应用对象的controller()方法，参数：控制器名，回调函数

  app.controller("index",function($scope){

    $scope.names=[{name:'tsh'},{name:'tsh1'}];

  })

  </script>

创建自定义指令

使用.directive()函数来自定义指令，要调用自定义指令，html元素上需要添加自定义指令名，使用驼峰法来命名一个指令

限制使用，默认是元素名调用和属性调用

  <body>

    <div ng-app="Home">

      元素名调用

      <tsh></tsh>

      属性调用

      <div tsh></div>

      类名调用

      <div class="tsh"></div>

    </div>

  </body>

  <script type="text/javascript">

  //实例化应用对象，参数：模块名，空数组

  var app=angular.module("Home",[]);

  //调用应用对象的directive()方法，参数：指令名，回调函数，返回一个对象

  app.directive("tsh",function(){

    return {

      template:"<p>我是自定义指令</p>"

    }

  });

  </script>

[angularjs] angularjs系列笔记（二）指令的更多相关文章

  1. angularjs学习第六天笔记（指令简介学习）

    您好,由于周末有事情,没哟学习angularjs,几天晚上开始继续学习angularjs,坚持加油每一天.谢谢 接着上周五学习了表单验证以后,今天开始学习angularjs中一个非常重要的模块:指令 ...

  2. AngularJS学习笔记二:AngularJS指令

    AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...

  3. Mastering Web Application Development with AngularJS 读书笔记(二)

    第一章笔记 (二) 一.scopes的层级和事件系统(the eventing system) 在层级中管理的scopes可以被用做事件总线.AngularJS 允许我们去传播已经命名的事件用一种有效 ...

  4. AngularJS笔记--自定义指令

    在前端开发中, 我们会遇到很多地方都会用到同一种类型的控件.AngularJS提供了自定义指令功能,我们可以在指令里面定义特定的html模板.提供给前台html调用. 一. 指令的简单定义.  下面定 ...

  5. AngularJS学习笔记(二)

    一.AngularJS Select(选择框) 1.使用 ng-options 创建选择框 <div ng-app="myApp" ng-controller="m ...

  6. AngularJS的学习笔记（二）

    只给自己看的. AngularJS 表达式 angularjs 使用表达式将数据绑定到html中. AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表 ...

  7. [angularjs] angularjs系列笔记（一）简介

    Angularjs通过新的属性和表达式扩展了html Andularjs 可以构建一个单一页面的应用程序(SPAS SinglePageApplications) Angularjs通过指令扩展了ht ...

  8. AngularJS 二 指令介绍

    初始化AngularJS框架 ng-app指令: 在NG-程序指令是AngularJS应用程序的起点.它自动初始化AngularJS框架.AngularJS框架将在加载整个文档之后首先检查HTML文档 ...

  9. AngularJS的学习笔记（一）

    声明:单纯作为我自己的学习笔记,纯是为了自己学习,上面的话都是从各处粘贴,如有冒犯,请原谅我这个小菜鸟~ AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷. 使用双大括 ...

  10. angularjs自动化测试系列之jasmine

    angularjs自动化测试系列之jasmine jasmine参考 html <!DOCTYPE html> <html lang="en"> <h ...

随机推荐

  1. JVM运行时数据区(一)

    1.名词解释: 栈帧:栈帧是用于支持虚拟机进行方法调用和方法执行的数据结构,它是虚拟机运行时数据区中的虚拟机栈的栈元素. 2.程序计数器: 程序计数器是一块比较小的内存空间,可以将它看作是当前线程所执 ...

  2. [转]Examining Open vSwitch Traffic Patterns

    In this post, I want to provide some additional insight on how the use of Open vSwitch (OVS) affects ...

  3. 背水一战 Windows 10 (108) - 通知（Tile）: application tile 基础, secondary tile 基础

    [源码下载] 背水一战 Windows 10 (108) - 通知(Tile): application tile 基础, secondary tile 基础 作者:webabcd 介绍背水一战 Wi ...

  4. 一线互联网常见的14个Java面试题，你颤抖了吗程序员

    跳槽不算频繁,但参加过不少面试(电话面试.face to face面试),面过大/小公司.互联网/传统软件公司,面糊过(眼高手低,缺乏实战经验,挂掉),也面过人,所幸未因失败而气馁,在此过程中不断查缺 ...

  5. Java定时任务解决方案

    很多项目中都会遇到需要定时任务的情况,本篇文章就结合了Spring中以及SpringBoot.SpringCloud中定时任务的解决方案. 在Spring中使用定时器 用SpringBoot比较多的同 ...

  6. Bitmap too larget to be uploaded into a texture的解决方法

    Bitmap too larget to be uploaded into a texture的解决方法 问题描述 使用canvas.drawBitmap()系列方法时,抛出错误Bitmap too ...

  7. Java 虚拟机的垃圾回收

    背景 垃圾收集(Garbage Collection,GC),GC的历史比Java久远,1960年诞生于MIT的Lisp是第一门真正使用内存动态分配和垃圾收集技术的语言. 对于Java来说,运行时区域 ...

  8. Redis 常用操作命令，非常详细！

    下面总结并演示了 Redis 的 常用管理命令.key 操作.字符串.集合.列表.散列类型的操作命令. 你需要掌握的 Redis 知识 史上最全 Redis 高可用解决方案总结 为什么分布式一定要有R ...

  9. Java核心技术及面试指南 线性表方面的面试题总结以及答案

    3.2.7.1 请用ArrayList实现Stack以及Queue的功能. public class ArrayListStack extends ArrayList implements Stack ...

  10. IdentityServer4（1）- 特性一览

    本地应用只本地客户端应用,例如QQ.微信 IdentityServer4是ASP.NET Core 2的OpenID Connect和OAuth 2.0框架.它可以在您的应用程序中提供以下功能: 它使 ...