重复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. 学习笔记----php环境配置

    Php开发环境自定义搭建 (万事开头难) 第一步:Apache安装(httpd-2.4.37-win64-VC15.zip) 下载已编译apache安装包:Apachelounge官方下载地址:htt ...

  2. 关于Nginx设置端口号，在Asp.net 获取不到的，解决办法

    不知道你有没有遇到过这样的问题,网站访客多起来后,心里很是高兴,加上了Nginx反向代理,出问题了 原来是这么写的: Request.Url.ToString() 输出是这样的: http://www ...

  3. sqlserver使用存储过程跟踪SQL

    为跟踪EF生成的SQL /1.添加存储过程/ USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_ ...

  4. Python编程练习：平方值格式化

    问题描述:获得用户输入的一个整数N,计算N的平方值:结果采用宽度20字符方式居中输出,空余字符采用减号(-)填充.如果结果超过20个字符,则以结果宽度为准. 示例: 源码: a = int(input ...

  5. 脑残式网络编程入门(一)：跟着动画来学TCP三次握手和四次挥手

    .引言 网络编程中TCP协议的三次握手和四次挥手的问题,在面试中是最为常见的知识点之一.很多读者都知道“三次”和“四次”,但是如果问深入一点,他们往往都无法作出准确回答. 本篇文章尝试使用动画图片的方 ...

  6. 在Apache上http强制跳转到https

    https已经配置完成,也可以正常使用,但输入域名或http加域名时也一样可以打开网站,于是想强制使用https 大概百度了一下方法,感觉与之前设置二级域名绑定二级目录时差不多 首先,修改httpd. ...

  7. 每天学点SpringCloud（四）：Feign的使用及自定义配置

    Feign:SpringCloud的官网对它的定义是这样的: 是一个声明式的Web服务客户端.它支持Feign本身的注解.JAX-RS注解以及SpringMVC的注解.Spring Cloud集成Ri ...

  8. 吴恩达机器学习笔记45-使用支持向量机（Using A SVM）

    本篇我们讨论如何运行或者运用SVM. 在高斯核函数之外我们还有其他一些选择,如:多项式核函数(Polynomial Kernel)字符串核函数(String kernel)卡方核函数( chi-squ ...

  9. 【详记MySql问题大全集】二、安装并破解Navicat

    Navicat for MySql 11.1.13 企业版 下载地址: 链接:https://pan.baidu.com/s/1N3ZQXNyx-W8D4AsuZdsMug 密码:x0rd 第二个是N ...

  10. Zookeeper 集群安装配置，超详细，速度收藏！

    今天,栈长分享下 Zookeeper 的集群安装及配置. 下载 下载地址:http://zookeeper.apache.org/ 下载过程就不说了,我们下载了最新的zookeeper-3.4.11. ...