Angular常用标记

(如果没有特别指明,则所有的HTML元素都支持该标记)

(如果没有特别指明,则 AngularJS 指令不会覆盖原生js的指令)

1、数据绑定类:

  1、插值语法:{{}}

  2、标签内容绑定:ng-bind

    定义:使用给定的 变量/表达式 的值来替换 HTML 元素的内容

  3、表单控件双向绑定:ng-model

    定义:绑定 HTML 表单元素到 scope 变量中,如果 scope 中不存在变量,将会创建它

    使用范围:支持该指令的元素:<input> <select> <textarea>.....支持用户输入的表单标签

2、事件(动作)绑定类:

  1、点击事件:ng-click //绑定的是事件调用,对比原生 js 的点击事件 

    <button ng-click = "toggle()">点击</button>

    <button onclick = "fun()"> 点击</button> 

  2、双击事件:ng-dblclick

  3、获得焦点事件:ng-focus

  4、失去焦点事件:ng-blur

  5、数据改变事件:ng-change 

    需要搭配 ng-model 指令使用
            该指令不会覆盖原生事件,当原生onchange事件触发,ng-change表达式与原生的onchange事件都会执行
            该事件在每次改变时触发,不需要等待一个完成的修改过程或者等待失去焦点的动作
            该事件只针对输入框值的真实修改,而不是通过 JavaScript 来修改
            使用范围:<input><select><textarea>支持

3、加载预处理类    

   1、ng-cloak:         

            页面加载时防止页面闪烁(其实也就是防止在 angularjs 还没有加载完成的时候 {{}} 内容以字符串的形式显示)
     解决ng-cloak不起作用的问题,在头部引入一下css:
             原理其实就是对 ng-cloak 的相关元素设置了 display:none!important; 隐藏相关内容,这样在页面还没准备好的时候就不显示,当 angular 指令开始解析的时候就把 ng-cloak 这个属性去除掉,这样元素就又现显示出来了。可是当我们的 angular.js 在页面最后加载的时候,就不能使 ng-cloak 达到预期的效果,因为 angular 还没加载的时候,页面内容就已经显示出来了。为了不违背 css 在前 js 在后的原则,而又让 ng-cloak 发挥作用,这时候就需要在页面最前面加上以下 css 样式,手动让其隐藏。
@charset "UTF-8";
[ng:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide
{
  display:none !important;}
  ng:form{display:block;
}
.ng-animate-start{
  clip:rect(0,auto,auto,0);
  -ms-zoom:1.0001;}
.ng-animate-active{
  clip:rect(-1px,auto,auto,0);
  -ms-zoom:1;
}

   2、ng-src:

            为 img 指定图片地址,需要使用 ng-src 替代 src
            是否覆盖原生的<img>:是
            使用范围:<img>
            注意:在 AngularJS 代码执行前不显示图片
      3、ng-href:
            添加链接地址
            是否覆盖原生的<a>:是
            使用范围:<a>
            如果在 href 的值中有 AngularJS 代码,则需要使用 ng-href 替代 href
            属性值可以包含{{}}任意字符串    

 4、状态设置类:

   1、ng-class

    方式1:$scope.classOptions={
               类名1:false,
               类名2:true
            }
      方式2:$scope.classOptions={
           类名1:$even,
         类名2:$middle,
         类名3:$odd
       }
              偶数行显示 类名1 样式,中间行显示 类名2 样式,奇数行显示 类名3 样式
  2、ng-style绑定样式:
    ng-style={
          backgroundColor="yellow"
        }

  3、

原文地址:https://www.cnblogs.com/z-one/p/6589281.html