zoukankan      html  css  js  c++  java
  • Angularjs基础(十一)

    ng-csp       描述:修改内容的安全策略
          实例: 修改AngularJS 中关于"eval"的行为方式及内联样式;          

          <body ng-app="" ng-csp>

          定义和用法
              ng-csp 指令用于修改AngularJS 的安全策略。
              如果使用了ng-csp指令,AngularJS 执行eval 函数,但允许注入内联样式。
              设置ng-csp 指令为no-unsafe-eval 将阻止AngarJS 执行eval 函数,但允许注入内联样式。
              设置ng-csp指令为no-inline-style 将阻止AngularJS 注入内联样式,但允许执行eval 函数。
          语法:<element ng-csp="no-unsafe-eval | no inline-style"></element>
          参数值: 值:no-unsafe-eval 描述:值可以设置为空,意味着eval 和内联样式都被允许。
              值:no-inline-style 描述: 可以设置 其中一个值,你有可以设置两个值使用分号隔开了。

    ng-cut       规定剪切事件的行为
            实例:输入框的文本被剪切是执行的表达式

          <input ng-cut="count = count + 1" ng-init="count=0" value="剪切这个文本">

            定义和用法
              ng-cut 指令用于告诉AngularJs 在剪切HTML 元素的文本时需要执行的操作。
              ng-cut指令指令不会覆盖元素的原始oncut事件,事件触发时,ng-cut表达式与原始的oncut 事件都会执行。
            语法:<element ng-cut="expression"></element>
            参数值: 值:expression 描述:元素文本被剪切是执行的表达式。

    ng-dblclick      规定双击事件的行为
            实例:在每次鼠标点击时,变量count加1;

            <h1 ng-dblclick="count = count + 1" ng-init ="count = 0"></h1>    

            定义和用法
              ng-dblclick 指令用于告诉AngularJS 在鼠标鼠标HTML 元素是需要执行的操作。
              ng-dblclick 指令指令不会覆盖元素的原始 ondblclick 事件, 事件触发时,ng-dblclick 表达式与原始的 ondblclick 事件将都会执行。
            语法:<element ng-dblclick="expression"></element>
            参数值: 值: expression 描述: 鼠标双击元素后执行的表达式。

    ng-disabled       规定一个元素是否被禁用
              实例:禁用或启用输入框
                  禁用表单输入域:<input type="checkbox" ng-model="all">               

                    <input type="text" ng-disabled="all">
                    <input type="radio" ng-disabled="all">
                    <select ng-disabled="all">
                      <option>Female</option>
                      <option>Male</option>
                    </select>

             定义和用法
                  ng-disabled 指令设置表单输入字段的 disabled 属性
                  语法:值: expression 描述:如果表达式返回true,则设置为元素添加disabled属性。

    ng-focus         规定焦点事件的行为
              实例:当输入框获取焦点时执行表达式:            

                <input ng-focus="count = count + 1" ng-init="count=0">
                <h1>{{count}}</h1>

            定义和用法
                ng-focus 指令用于告诉AngularJS 在HTML 元素或获取焦点时执行的操作。
            语法:<element ng-focus="expression"></element>
            参数值: 值:expression 描述:元素获取焦点时执行的表达式。

    ng-form         指定HTML表单继承控制器表单

    ng-hide           隐藏或显示HTML
            实例:在复选框选中时应从一部分;
            隐藏 HTML: <input type="checkbox" ng-model="myVar">           

                <div ng-hide="myVar">
                  <h1>Welcom</h1>
                  <p>Welcome to my home</p>
                </div>

          定义和用法
            ng-hide 指令在表达式为true 时隐藏HTML 元素。
            ng-hide 是AngularJS 的预定义类,设置元素的display 为none.
        语法:<element ng-hide="expression"></element> 作为 CSS 类使用: <element class="ng-hide"></element>
        参数值: 值: expression 描述 表达式如果返回true 则隐藏元素。

    ng-href         为the<a>元素指定连接
            实例:使用AngularJS设置添加链接        

            <div ng-init="myVar = 'http:www.runoob.com'">
              <h1>123</h1>
              <p>访问<a ng-href="{{myVar}}">{{myVar}}</a></p>
            </div>

          定义和用法: ng-href 指令覆盖了原生的<a>元素href属性。
          如果在href的值中油AngularJs ,则需要使用ng-href而不是href.
          语法: <a ng-href="string"></a>
          参数值:值:expression 描述:字符串,表达式。

    ng-if         如果条件为false 移除HTMl元素。
           实例:取消选中并移除内容          

              <input type="checkbox" ng-model = "myVar" ng-init="myVar = true">
              <div ng-if="myVar">
                <h1>Welcome</h1>
                <p>Welcome to my home</p>
              <div>

          定义和方法: ng-if指令用表达式为false 时移除HTML 元素。
                如果if语句执行的结果为true,会添加移除元素,并显示。
                ng-if 指令不同于ng-hide, ng-hide隐藏元素。而ng-if 是从DOM 中移除元素。
          语法: <element ng-if="expression"></element>
          参数值: 值:expression 描述:如果表达式返回false则会移除整个元素,如果为true,则会添加元素。

    ng-include         描述:在应用中包含移除HTML元素。
              实例:包含HTML 文件
                <div ng-include="'myFile.htm'"></div>
              定义和用法:ng-include 指令用于包含外部的HTML 文件。包含的内容作为指定元素 的子节点。
              语法:<element ng-include="filename" onload="expression" autoscroll="expression" ></element>
              参数值: 值: filename 描述:文件名,可以使用表达式来返回文件名。
                  值: onload 描述: 可选文件载入后执行的表达式。
                  值: auto 可选,包含的部分文件是否在执行视图上可滚动。

    ng-init           描述:定义应用的初始化值。
              实例:初始化应用时创建一个变量:           

                <div ng-app="" ng-init="myText='Hello World'"></div>
                <h1>{{myText}}</h1>

              定义和用法: ng-init 指令执行给定的表达式。
                ng-init 指令添加一些不必要的逻辑到 scope 中,建议你可以在控制器中 ng-controller 指令执行它 。
                语法:<element ng-init="expression"></element>
                参数值: 值: epression 描述: 执行的表达式。

    ng-jq           描述:定义应用必须使用到的库。

    ng-keydown       描述:规定按下键事件的行为:
              实例:按下键是执行的代码:          

                <input ng-keydown="count = count + 1" ng-init="count=0"/>
                <h1>{{count}}</h1>

              定义和用法:ng-keydown 指令告诉AngularJS在制定HTML 元素上按下键时需要的操作。
              按键敲击的事件顺序: 1.Keydown 2.Keypress 3.Keyup
              语法: <element ng-keydown="expression"></element>
              参数值:值: epession 描述 按下键执行的表达式。

    ng-keypress         描述:规定按下按键事件的行为
              实例:按下按键时执行的代码:             

                  <input ng-keypress = "count= count + 1" ng-init="count=0">
                  <h1>{{count}}</h2>

              定义和用法:
                  ng-keypress 指令用于告诉 AngularJS 在指定 HTML 元素上按下按键时需要的操作。
                  按键敲击的事件顺序: 1.Keydown 2.Keypress 3.Keyup
              参数值: 值:expression 描述: 按下键执行表达式。

    ng-keyup           描述:规定松开键盘事件的行为。
            实例:按键松开时执行的代码:          

              <input ng-keyup="count = count = 1" ng-init="count=0"/>
              <h1>{{count}}</h1>

            定义和用法 :ng-keyup 指令用于告诉 AngularJS 在指定 HTML 元素上按键松开时需要的操作。
            按键敲击的事件顺序: 1.Keydown 2.Keypress 3.Keyup
            参数值:expression 描述; 按键松开执行的表达式。

    ng-list           描述:将文本转换为列表。
            实例: 转换用户的输入为数组。

              <div ng-app="">
              <input ng-model="customer" ng-list>
              <pre>{{customers}}</pre>

            定义和用法: ng-list 指令将字符串转换为数组,并使用逗号分隔。
            语法: <element ng-list ="separator"></element>
              <input>, <select>, <textarea>, 和其他可编辑元素支持该指令。
            参数值: 值 separator 描述: 可选定义分隔符,默认为.

    ng-model         描述:绑定HTML控制器的值到应用数据。
              实例:绑定输入的值到scope变量中;            

                <div ng-app="myApp" ngcontroller="myCtrl">
                  <input ng-model="name">
                </div>    
                <script>
                      var app = angular.module('myApp',[]);
                      app.controller('myCtrl',function($scope){
                          $scope.name="John Doe"
                      })
                </script>    

             定义和用法:
                  ng-model 指令绑定了HTML 表单元素到scope 变量中。
                  如果scope 中不存在变量,将会创建。
            语法:<element ng-model="name"></element>
            参数值:值: separator 描述: 你要半丁到表单域的属性名。

  • 相关阅读:
    null in ABAP and nullpointer in Java
    SAP ABAP SM50事务码和Hybris Commerce的线程管理器
    Hybris service layer和SAP CRM WebClient UI架构的横向比较
    SAP ABAP和Linux系统里如何检查网络传输的数据量
    SAP CRM WebClient UI和Hybris的controller是如何被调用的
    SAP CRM和Cloud for Customer订单中的业务伙伴的自动决定机制
    SAP CRM WebClient UI和Hybris CommerceUI tag的渲染逻辑
    SAP BSP和JSP页面里UI元素的ID生成逻辑
    微信jsapi支付
    微信jsapi退款操作
  • 原文地址:https://www.cnblogs.com/nmxs/p/5455529.html
Copyright © 2011-2022 走看看