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 描述: 你要半丁到表单域的属性名。

  • 相关阅读:
    Mobox企业网盘回收站文件清空与恢复的管控
    NAS设备部署后采用Mobox企业云盘来提升管理功能
    企业网盘支持对象存储帮助用户推行私有云
    阿里云登录界面无法输入账号及密码的解决方法
    团队协作管理-任务追踪管理
    windows10 家庭版 无法远程2012的解决
    bat删除多少天前的文件包含子目录
    企业网盘居然支持高速局域网文件传输工具(速度可达20M)
    防范永恒之蓝勒索病毒-XP、Win10文件共享怎样设置
    【OpenGL】学习笔记#2
  • 原文地址:https://www.cnblogs.com/nmxs/p/5455529.html
Copyright © 2011-2022 走看看