• 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、

  • 相关阅读:
    [HAOI2008] 硬币购物
    [HNOI2002] Kathy 函数
    [SCOI2009] windy数
    圆方树总结
    ABOUT ME && 友链
    逝念偶拾
    文化课日常
    记一些欢愉
    浅谈
    洛谷 4823 [TJOI2013]拯救小矮人
  • 原文地址:https://www.cnblogs.com/z-one/p/6589281.html
Copyright © 2020-2023  润新知