加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angular常用指令

发布时间:2020-12-17 09:19:23 所属栏目:安全 来源:网络整理
导读:简介:AngularJS 是一个 JavaScript 框架,通过 script 标签添加到 HTML 页面 例如: script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"/script 通过表达式绑定数据到 HTML AngularJS 指令: (参考网址:http://www.runoob.c

简介:AngularJS 是一个 JavaScript 框架,通过 <script> 标签添加到 HTML 页面

例如:

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

通过表达式绑定数据到 HTML

AngularJS 指令:

(参考网址:http://www.runoob.com/angularjs/angularjs-reference.html)

以 ng 作为前缀的 HTML 属性:

(1)ng-directives 扩展了 HTML

(2)ng-app 指令定义一个 AngularJS 应用程序的根元素,一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序,在网页加载完毕时会自动引导(自动初始化)应用程序

(3)ng-model 指令把html元素(比如输入域的值)绑定到应用程序

  (扩展)ng-model 指令作用:

      ①为应用程序数据提供类型验证(number、email、required)

      ②为应用程序数据提供状态(invalid、dirty、touched、error)

      ③为 HTML 元素提供 CSS 类

      ④绑定 HTML 元素到 HTML 表单

(4)ng-bind 指令把应用程序数据绑定到 HTML 视图

(5)ng-init 指令初始化AngularJS应用程序变量,为应用程序定义了初始值.通常情况下,不使用 ng-init,使用一个控制器或模块来代替它

(6)ng-controller 定义了控制器

(7)ng-bind绑定HTML元素到应用程序数据,

<element ng-bind="expression"></element>
// 或作为 CSS 类:
<element class="ng-bind: expression"></element>

(8)ng-repeat 指令会重复一个HTML元素,遍历数组对象

(9)创建自定义的指令,使用 .directive 函数来添加自定义的指令,要调用自定义指令,HTML 元素上需要添加自定义指令名

使用驼峰法来命名一个指令, 例如runoobDirective,但在使用它时需要以 - 分割.可以通过以下方式来调用指令:元素名,属性,类名,注释

(10)ng-if 指令用于在表达式为 false 时移除 HTML 元素,若为true,会添加移除元素,并显示.语法<div ng-if="expression"></div>

(11) ng-hide 隐藏元素,而ng-if 是从 DOM 中移除元素

(AngularJS 模块(Module) 定义了 AngularJS 应用

AngularJS 控制器(Controller) 用于控制 AngularJS 应用

ng-app指令定义了应用,ng-controller 定义了控制器)

angularjs作用:

把应用程序数据绑定到 HTML 元素

克隆和重复 HTML 元素

隐藏和显示 HTML 元素

在 HTML 元素"背后"添加代码

支持输入验证

AngularJS表达式可以包含字母,操作符,变量;可以写在 HTML 中;不支持条件判断,循环及异常;支持过滤器

数据绑定:

{{ firstName }} 表达式是一个 AngularJS 数据绑定表达式

AngularJS 中的数据绑定,同步了 AngularJS 表达式与 AngularJS 数据

{{ firstName }} 是通过 ng-model="firstName" 进行同步

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读