Angular指令

  1. ng-app 指令定义了 AngularJS 应用程序的 根元素,在网页加载完毕时会自动引导(自动初始化)应用程序
  2. ng-init 指令为 AngularJS 应用程序定义了 初始值
  3. ng-model 指令 绑定 HTML 元素 到应用程序数据

    ng-model 指令也可以:

    • 为应用程序数据提供类型验证(number、email、required)。
    • 为应用程序数据提供状态(invalid、dirty、touched、error)。
    • 为 HTML 元素提供 CSS 类。
    • 绑定 HTML 元素到 HTML 表单。
  4. ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素
  5. ng-model 用于表单数据双向绑定,对于普通元素无效
  6. ng-bind  用于普通元素,应用程序单项渲染数据到元素 ,不能应用于表单
  7. 当ng-bind和{{}}同时使用时,ng-bind绑定的值覆盖该元素的内容
  8. 自定义指令使用驼峰命名,使用时需用 - 分割;可以使用元素,属性,类名,注释方式调用
    eg:
    元素名:<my-directive></my-directive>
    属性: <div my-directive></div>
    类名: <div class="my-directive"></div>
    注释:<!-- directive: my-directive -->
  9. restrict 值可以是以下几种:
    • E 作为元素名使用
    • A 作为属性使用
    • C 作为类名使用
    • M 作为注释使用

    restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

时间: 2024-10-12 23:19:10

Angular指令的相关文章

jquery函数转为angular指令实现示例

最初像想要实现的是:显示如下的小星星 最初的实现方式是在html页面加JS脚本,但是老外不喜欢这样,一定要我们转为angular指令,所以就试试呗~ 一.最初的实现方式 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta content="IE=edge,chrome=1&quo

Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定

一放假就高产似母猪了. 00.混乱的前端界 Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学.在这之前,前端的东西大部分都用的jQuery,而Angular正好是和jQuery的思维是相反的,开发过程中遇到了不少坑.而Angular团队也放弃了1.x开始开发和React神似的2.0版本,唉,真是沧海桑田啊. 01.Angular vs jQuery Angular模块化和解耦的思路确实值得一学,但是相对于成熟的j

angular指令监听ng-repeat渲染完成后执行自定义事件方法

今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己创建自定义指令. 在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even,$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,所以可以通过判断$last的值来监听ng-repeat的执行状态, 怎么在遍历过程中拿到$last的值:自定义指令 v

【转】angular指令入坑

独立作用域和函数参数 通过使用本地作用域属性,你可以传递一个外部的函数参数(如定义在控制器$scope中的函数)到指令.这些使用&就可以完成.下面是一个例子,定义一个叫做add的本地作用域属性用来保存传入函数的引用: angular.module('directivesModule').directive('isolatedScopeWithController', function () {    return {        restrict: 'EA',        scope: { 

angular 指令 要点解析

指令可以删繁就简前端的js代码,杜绝重复的js代码和html代码. 下面就对指令的重要属性进行罗列 一.restrict  =  'AEC'  分别指该指令标识位于attribute属性.element元素.class. 二.scope  = true/false/{name:'=/@/&'}    默认为false,如果设置为true 则说明指令内部独立作用域. scope: { lover: '=', name: '@', say: '&' } 1.{name:'@inputName'

angular指令大全

这篇文章的案例都是来自官方,引用的cdn来自bootcss, 因为angular的官方网站被屏了, 所以要翻, 不过我把整个文档下回来了,方便大家下载可以点击: 打开下载英文版 angular的指令 a标签(也就是html的锚标签): angular的所有事件直接绑定在元素的上,而且事件都是以“ng-****”开头,比如ng-click,ng-keydown,ng-keypress,ng-mouseover.... 基本的绑定事件代码, 点击a标签会触发该控制器内部$scope的alert事件;

如何编写Angular指令

[20140917]Angular:如何编写一个指令 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre

利用angular指令监听ng-repeat渲染完成后执行脚本

业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写.有经验的同学都应该知道,在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even,$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,so,通过判断$last的值来监听ng-repeat的执行状态,怎么在遍历过程中拿到$la

angular指令笔记(一):ng-options

1.ng-options指令用途: 在表达式中使用数组或对象来自动生成一个select中的option列表.ng-options与ng-repeat很相似,很多时候可以用ng-repeat来代替ng-options.但是ng-options提供了一些好处,例如减少内存提高速度,以及提供选择框的选项来让用户选择.当select中一个选项被选择,该选项将会使用ng-model自动绑定到对应数据上.如果你想设一个默认值,可以像这样:$scope.selected = $scope.collection

angular学习笔记02 angular指令大全

第一步 先要引入angular, 第二步  在 html 标签中<html  ng-app>  加入ng-app(这是个必须的,不然会报错) 接下来就可以去使用angular的各种指令了. //js文件  js语法需要注意 在网上的写法有很多,最好是按标准的写法来写,不然js代码经过压缩就不能使用了(很重要) 压缩代码会出错,不压缩的话还是能运行的,原因是压缩代码会把关键字替换,因此 angular 在定义的时候需要这样. angular.module('antsins.controllers