重复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. python+unittest 控制用例的执行顺序

    unittest的main()方法执行用例的顺序是按照测试类.测试方法的名字的ASCII顺序来执行测试方法.所以可能执行的顺序和你想要的顺序不一样,可能通过下面两种方法修改执行顺序 1. 通过Test ...

  2. Delphi Excel导入 的通用程序

    步骤: 1 连excel(自己知道其格式,最好是没个字段在数据一一对应) 2 读excel数据,填入到数据库 我这里有个函数,实现把excel表格中数据导入数据库,在一条数据导入前判断数据库中是否有该 ...

  3. FineCMS 5.0.10 多个 漏洞详细分析过程

    0x01 前言 已经一个月没有写文章了,最近发生了很多事情,水文一篇.今天的这个CMS是FineCMS,版本是5.0.10版本的几个漏洞分析,从修补漏洞前和修补后的两方面去分析. 文中的evai是特意 ...

  4. 吴恩达机器学习笔记48-降维目标：数据压缩与可视化（Motivation of Dimensionality Reduction : Data Compression & Visualization）

    目标一:数据压缩 除了聚类,还有第二种类型的无监督学习问题称为降维.有几个不同的的原因使你可能想要做降维.一是数据压缩,数据压缩不仅允许我们压缩数据,因而使用较少的计算机内存或磁盘空间,而且它也让我们 ...

  5. 第一节：学会Java前提-手把手教你配置JDK环境变量

    前言 大家好,今天写一遍学会Java前提-手把手教你配置JDK环境变量的概述,希望你们喜欢 下载地址 下载jdk,和eclipse就比较简单了,提供JDK 9 地址: http://www.oracl ...

  6. LabVIEW（一）：知识入门

    一.DAQ基础知识简介 1.DAQ是英文Data Acquisition (数据采集)的缩写. 数据采集(DAQ)是指测量:电压.电流.温度.压力.声音.编码数据等电气或物理现象的过程. 2.数据采集 ...

  7. C#8个常用的字符串的操作

    1.根据单个分隔字符用split截取 string st="GT123_1"; string[] sArray=st.split('_'); 输出:sArray[0]=" ...

  8. 为什么 array.foreach 不支持 async/await

    一.背景 react 项目中,渲染组件时,显示的数据一直有问题,本来以为是 react 组件的问题,后来才发现罪魁祸首在 fetch 数据的过程,因为我用了 async/await ,而却搭配了 fo ...

  9. 8.python面向对象编程

    基本概念 Class 类一个类即是对一类拥有相同属性的对象的抽象.蓝图.原型.在类中定义了这些对象的都具备的属性(variables(data)).共同的方法 Object 对象 一个对象即是一个类的 ...

  10. NodeJS学习笔记 - Apache反向代理集成实现

    初学,简单的实现,为进行优化. 1. 假设NodeJS服务端监听3000端口 2. Apache反向代理设置 a. 在httpd.conf配置文件中开启代理模块 LoadModule proxy_mo ...