重复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. 虚拟机找不到/mnt/hgfs挂载目录——debian与 vmware

    如果在安装好 VMware Tools 并在设置里面设定好共享目录之后仍然找不到 /mnt/hgfs 默认挂载目录,那么尝试以下步骤: 1. 确认VMware Tools 和共享目录设定已经完成: 2 ...

  2. angular-指令

    ng-app 作用域 ng-init 声明 module 模块 ng-model 双向绑定 ng-bind 绑定 angular是一个MVC框架:即 M------------------module ...

  3. python爬虫学习之日志记录模块

    这次的代码就是一个日志记录模块,代码很容易懂,注释很详细,也不需要安装什么库.提供的功能是日志可以显示在屏幕上并且保存在日志文件中.调用的方式也很简单,测试代码里面有. 源代码: #encoding= ...

  4. DVWA 1.9 通关秘籍

    DVWA 1.9 通关秘籍   本文来源:i春秋社区-分享你的技术,为安全加点温度    DVWA (Dam Vulnerable Web Application) DVWA是用PHP+Mysql编写 ...

  5. Microsoft Windows Server 2012 Ad域搭建

    Microsoft Windows Server 2012 Ad域搭建 一.Active Directory概念 AD(活动目录):是一种组织资源信息的方法,目录的意义在于我们可以通过标题或者说搜索条 ...

  6. Drools规则引擎入门指南（一）

    最近项目需要增加风控系统,在经过一番调研以后决定使用Drools规则引擎.因为项目是基于SpringCloud的架构,所以此次学习使用了SpringBoot2.0版本结合Drools7.14.0.Fi ...

  7. Docker学习笔记-简单运行.netcore

    前言: 环境:centos7.5 64 位 正文: 拉取 microsoft/dotnet, 安装完毕后执行 docker images 可以看到本地已经包含 microsoft/dotnet #包含 ...

  8. H5中用js让页面全屏

    概述 意外的发现一个网页有一个按钮能使网页全屏,查了下代码发现是H5的全屏api,于是就查了下资料,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: 利用js如何做到让页面全屏和不全屏功能 ...

  9. IP达人启示录

    在家附近的一个小公园中,一个老人每天晚上都在用水练习书法,他的字写的的确很不错,不懂书法的我,看了就感觉非常的带劲--苍劲有力.今晚再次路过的时候,就有种想和这个老人聊一聊的冲动,那么多年纪了,用书法 ...

  10. 10 种保护 Spring Boot 应用的绝佳方法

    原文:developer.okta.com/blog/2018/07/30/10-ways-to-secure-spring-boot 译文:www.jdon.com/49653 Spring Boo ...