美文网首页
angularjs 指令基础随笔

angularjs 指令基础随笔

作者: 杨杨1314 | 来源:发表于2017-03-28 09:27 被阅读49次

1:ng-app

该指令自动启动一个AngularJS应用,通常放置在网页的根元素如body或html 标签上。在使用之前必须引入jq和angularjs文件。

此处声明了ng-app和ng-controller 图2

声明完了ng-app  在js中首先创建模块,然后才能创建控制器,使用控制器文件。如:图2。

2:ng-bind

设置ngbind属性,angular会将ngbind的值替换掉标签的内容,并更新文本内容的值.

通常情况下,不使用ngbind属性,而是使用双花括号标记{ { } }。

如果网速比较慢浏览加载angularjs之前会显示原始形态时,最好用ngbind来代替,因为ngbind是元素的属性,加载的时候看不到。

 $scope.names =’ 张三‘

这是把ng-bind当成了属性用。

还可以当成类用:例如:

ng-bind

3:ng-bind-html

将自定义的html插入到指定的地方。

4:ng-bind-template

告诉 AngularJS 将给定表达式的值替换 HTML 元素的内容。当你想在 HTML 元素上绑定多个表达式时可以使用ng-bind-template指令。

5:ng-blur

失去焦点事件

6:ng-change

值改变时触发事件,这个事件是值改变就立即触发和JavaScript中的onchange的触发方式(在用户离开表单元素或按回车键时)不同.ngChange事件只在基于model的值改变时才触发。

7:ng-checked 

用于设置单元框或者复选框的checked 属性。

如果ng-checked属性返回 true,复选框(checkbox)或单选按钮(radio)将会被选中。

8:ng-class

ng-class指令用于给 HTML 元素动态绑定一个或多个 CSS 类。

a:第一种:通过双向数据绑定来改变

数据绑定式

b:第二种:通过字符串数组的形式来改变

符串数组的形式来改变

c:第三种:通过key/value的方式来改变

key/value的方式

9:ng-class-odd/ng-class-even

与ng-class类似。但是作用只在奇数(偶数)行。 这个指令只能应用在一个ngrepeat范围。

10:ng-click

点击事件,多个点击时间用,隔开

11:ng-clock

ng-cloak指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现显示 AngularJS 代码,进而会有闪烁的效果,ng-cloak指令是为了防止该问题的发生。

ng-cloak

12:ng-controller 

控制器:ngController指定一个Controller类,这个类控制业务逻辑和模型的在视图的绑定。

在js中需要 module()

13:ng-copy

在文本被拷贝的时候执行。

ng-copy

14:ng-csp

ng-csp

ng-csp指令用于修改 AngularJS 的安全策略。

如果使用了ng-csp指令, AngularJS 将不会执行eval 函数,这样就无法注入内联样式。

设置ng-csp指令为no-unsafe-eval, 将阻止 AngularJS 执行 eval 函数,但允许注入内联样式。

设置ng-csp指令为no-inline-style, 将阻止 AngularJS 注入内联样式,但允许 执行 eval 函数。

如果开发 Google Chrome 扩展或 Windows 应用ng-csp指令是必须的。

注意:ng-csp指令不会影响 JavaScript,但会修改 AngularJS 的工作方式,这就意味着: 你仍然可以编写 eval 函数, 且也可以正常执行, 但是 AngularJS 不能执行它自己的 eval 函数。如果采用兼容模式,会降低 30% 的性能。

15:ng-cut

在文本被剪切的时候触发。

ng-cut

16:ng-dblclick

在双击的时候触发。

ng-dblclick

17:ng-disabled

ng-disabled指令设置表单输入字段的 disabled 属性(input, select, 或 textarea)。

如果ng-disabled中的表达式返回 true 则表单字段将被禁用。

ng-disabled

18:ng-focus

获取焦点事件

ng-focus

19:ng-form

两种写法 <form name="myForm"></form> <ng-form name="myForm"></ng-form>

form

相关文章

  • angularjs 指令基础随笔

    1:ng-app 该指令自动启动一个AngularJS应用,通常放置在网页的根元素如body或html 标签上。在...

  • AngularJS指令-基础

    简介 AngularJS 通过被称为 指令 的新属性来扩展 HTML。AngularJS 通过内置的指令来为应用添...

  • Angular相关指令

    AngularJS 指令 本教程用到的 AngularJS 指令 : 指令 描述 ng-app 定义应...

  • AngularJS 参考手册

    AngularJS 指令 本教程用到的 AngularJS 指令 : 过滤器解析 AngularJs 过滤器。 A...

  • AngularJS (2)

    AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。 ng-app 指令...

  • AngularJS 指令

    AngularJS 指令 背景 什么是AngularJS指令? 一、内置指令 二、自定义 概念 模块对象app,提...

  • AngularJS使用

    AngularJS实现MVC AngularJS模块化Module AngularJS指令系统 AngularJS...

  • Angular基础学习-01

    本节包括:AngularJS表达式、AngularJS指令、AngularJS模型、AngularJS的Scope...

  • 15. Angular的内置指令(过滤器)

    AngularJS中自定义指令处理 以ng开头的指令都是内置指令。 内置指令是AngularJS已经处理,使用内置...

  • Angular

    AngularJS 通过 ng-directives(指令)扩展了HTML AngularJS 通过内置的指令来为...

网友评论

      本文标题:angularjs 指令基础随笔

      本文链接:https://www.haomeiwen.com/subject/tzolottx.html