ngCloak

ngCloak指令被使用在，阻止angular模板从浏览器加载的时候出现闪烁的时候。使用它可以避免闪烁问题的出现。
 
该指令可以应用于<body>元素,但首选使用多个ngCloak指令应用于页面的一小部分,允许进步呈现的浏览器视图。
 
ngCloak工作与下面的css规则嵌入到角的合作。js和angular.min.js。请添加angular-csp CSP的模式。css,html文件(见ngCsp)。
  1. [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  2. display: none !important;
  3. }
当这个css规则由浏览器加载,所有html元素(包括孩子)标有ngCloak指令是隐藏的。当angular在编译的时候约到了这个指令，
它删除ngCloak元素属性,使得编译元素可见。
 

为达到最佳的效果 angular脚本必须加载html文档的头部部分;或者上面的css规则必须包含在应用程序的外部样式表。

ngController

ngController会添加一个 controller类到view里面,这是angular支持模型-视图-控制器设计模式背后的原则的一个关键。
 
angular的MVC组件：
 
Model — 模型是一个范围的属性;scope是附加到DOM属性通过绑定访问范围。
 
View — 与数据绑定模板(HTML)呈现到视图。
 
Controller — ngController指令指定一个控制器类;这个类包含应用程序以及使用的函数与值的范围。、
 
 

Directive Info

这个指令创建新的范围。 这个指令执行优先级500。
 
 

Usage

as attribute:

  1. <ANY
  2.   ng-controller="">
  3. ...
  4. </ANY>
  1.  

Arguments

Param Type Details
ngController expression

$controllerProvider或者表达式注册构造函数名字，对当前范围评估一个构造函数。

通过制定ng-controller="as propertyName"，控制力实例可以发布到一个范围的属性。

 

如果当前$controllerProvider配置为使用全局变量(via $controllerProvider.allowGlobals()),就可以以全局名去访问构造函数（不被推荐）
这是一个简单的表单编辑用户的联系信息。添加、删除、清算,问候在控制器中声明的方法(参见源选项卡)。这些方法可以很容易地从angular标记。任何更改会自动反映在视图的数据而不需要手动更新。
 
两个不同的声明风格包括如下:
 
一种方法直接控制属性使用 this: ng-controller="SettingsController1 as settings"
一种方法在控制器里注入$scope：ng-controller="SettingsController2"
 
第二个选择是更加普遍在Angular社区里。一般用于样板和指南，然而，优点直接绑定属性控制器,避免范围。
 
当有多个控制器控制同名的元素的时候，使用controller as 使它使得你的模板更加明显。
 
如果您正在编写你的控制器类更容易获得属性和方法。这将出现在scope,控制器内部的代码。
 
因为总是有 . 在绑定,您不必担心原型继承屏蔽原语。
 

ngCsp

使CSP(内容安全策略)能够被支持。
 
这是必要的,当开发诸如Google Chrome扩展或普遍的Windows应用程序。
 
CSP禁止应用程序使用eval或者Function(string)生成的函数(在其他事物之中)。
 
Angular 兼容  CSP ，但有两点不同:
 
1:不适用Function构造函数生成getter优化值
2：在document中不要注入定制的样式表文件
 
AngularJS使用函数(字符串)生成函数为速度优化，应用ngCsp指令会造成Angular使用CSP兼容模式。
这种模式AngularJS将评估所有表达式比非-CSP模式低于30%,但没有安全违规将提高。
 
 
CSP禁止JavaScript内联样式表规则。在非CSP模式Anuglar自动包括一些CSS规则(例如ngCloak)为了使这些指令在CSP模式下工作,手动包含它的 angular-csp.css
 
如果CSP是活动的以及自动打开CSP-safe模式，Angular会尝试自动检测。
然后自动检测会触发一个CSP错误登录控制台:
 
//这个在stackoverflow网上查了一下，好像是说有问题，还有就是知道它是一个安全机制的东西，应该是如果浏览器有安全限制，用了它就可以解除限制，除了上面说的那两种方式除外。
 

ngClick

ngClick指令允许您指定自定义行为，用于元素的单击行为。
 

Directive Info

这个指令执行优先级为0。
 

Usage

as attribute:

  1. <ANY
  2.   ng-click="">
  3. ...
  4. </ANY>
  1.  

Arguments

Param Type Details
ngClick expression

Expression to evaluate upon click.(事件对象可以用 $event)

ngDblclick

The ngDblclick 指令允许您指定自定义行为，用于元素的双击行为。

Usage

as attribute:

  1. <ANY
  2.   ng-dblclick="">
  3. ...
  4. </ANY>
  1. /////////////////////////////////////////////////////////////////////
  1. <button ng-dblclick="count = count + 1" ng-init="count=0">
  2.   Increment (on double click)
  3. </button>
  4. count: {{count}}
 

ngMousedown，

ngMouseup，

ngMouseover，

ngMouseenter，

ngMouseleave，

ngMousemove，

ngKeydown：

  1. <input ng-keydown="count = count + 1" ng-init="count=0">
  2. key down count: {{count}}

ngKeyup：

  1. <p>Typing in the input box below updates the key count</p>
  2. <input ng-keyup="count = count + 1" ng-init="count=0"> key up count: {{count}}
  4. <p>Typing in the input box below updates the keycode</p>
  5. <input ng-keyup="event=$event">
  6. <p>event keyCode: {{ event.keyCode }}</p>
  7. <p>event altKey: {{ event.altKey }}</p>

ngKeypress：

  1. <input ng-keypress="count = count + 1" ng-init="count=0">
  2. key press count: {{count}}
  4. 以上这些的用法都差不多，就是事件形式不一样而已。

ngSubmit：

允许绑定Angular表达式到 onsubmit 事件上去。
 
此外它阻止默认动作（这意味着在将请求发送给服务器并重新加载当前页面），但前提是不包含action,
data-action, or x-action属性。去看下指令文档，那里详细讨论了何时ngSubmit可能被触发。
 
警告：通过使用ngClick和ngSubmit一起处理程序。小心不要造成“double-submission”【连续提交】 
  1. <script>
  2.   angular.module('submitExample', [])
  3.     .controller('ExampleController', ['$scope', function($scope) {
  4.       $scope.list = [];
  5.       $scope.text = 'hello';
  6.       $scope.submit = function() {
  7.         if ($scope.text) {
  8.           $scope.list.push(this.text);
  9.           $scope.text = '';
  10.         }
  11.       };
  12.     }]);
  13. </script>
  14. <form ng-submit="submit()" ng-controller="ExampleController">
  15.   Enter text and hit enter:
  16.   <input type="text" ng-model="text" name="text" />
  17.   <input type="submit" id="submit" value="Submit" />
  18.   <pre>list={{list}}</pre>
  19. </form>

ngFocus

指定自定义行为焦点事件。
 
注释：焦点事件是同步执行，当调用input.focus()时AngularJS执行表达式使用scope.$evalAsync
如果事件触发期间$apply确保一致的状态。
 

ngBlur

指定自定义行为失去焦点事件。
 
当元素失去了焦点，一个失去焦点事件被触发。
 
注释：同步执行 blur 事件也在DOM操作(如删除一个焦点input)，AngularJS执行表达式使用scope.$evalAsync
如果事件触发期间$apply确保一致的状态。
 

ngCopy

指定自定义行为复制事件。
 

Directive Info

这个指令执行优先级为0。
 
//这个效果是： 默认的Input里面为 copy me 当你用鼠标选中这里面的文本的时候，就会触发。
  1. <input ng-copy="copied=true" ng-init="copied=false; value='copy me'" ng-model="value">
  2. copied: {{copied}}
  1.  

ngCup

指定自定义行为剪切事件。
 
//这个效果是： 默认的Input里面为 cut me 当你用鼠标选中这里面的文本ctrl+X的时候，就会触发。

  1. <input ng-cut="cut=true" ng-init="cut=false; value='cut me'" ng-model="value">
  2. cut: {{cut}}
 

ngIf

ngIf指令删除或重新创建DOM树的一部分基于{ }表达式。如果表达式分配给ngIf一个错误值然后从DOM元素被删除,
否则一个克隆的元素插入到DOM。
ngIf有别于ngShow和ngHide， ngIf完全删除和重新创建DOM中的元素,而不是通过显示css属性改变其可见性。
常见的情况，当使用css选择器时这种差异是显著的，依靠在DOM元素的位置。
如：:first-child or :last-child 伪类
 
注意,当删除一个元素使用ngIf scope被摧毁然而一个新的scope被建立然后元素被恢复。scope创建继承自父级的scope
如果ngModel 是用在　ngIf绑定到一个javascript中使用原始定义在父范围。
在这种情况下,任何变量的修改,子scope将会覆盖(隐藏)父范围中的值。
 
还有，ngIf 使用它们的编译状态去重新创建元素，这种行为的一个例子：
如果一个元素的class属性是直接修改后的编译,使用如JQery中的 .addClass() 方法，以及元素后删除。
ngIf 重新新建的元素添加的class将会丢失，因为原来的编译状态用于再生元素。
另外,您可以通过ngAnimate模块提供动画动画 enter 和 leave 的效果。
 

ngInclude

获取信息,汇编,包括外部HTML片段.
 
默认情况下,模板URL仅限于相同的域和协议应用程序文档。是通过$sce.getTrustedResourceUrl。
从其他域加载模板或协议您可以whitelist them or wrap them作为受信任值，参照Angular的Strict Contextual Escaping.
此外，浏览器 Same Origin Policy【同源策略】 and Cross-Origin Resource Sharing (CORS)【跨源资源共享】
政策可能进一步限制是否成功加载模板。例如,ngInclude不会在所有的浏览器中去跨域执行，以及一些file://的地址。
 

ngNonBindable

如果你不想绑定 Angular 数据绑定，那么就可以用这个方法。
  1. <div>Normal: {{1 + 2}}</div>
  2. <div ng-non-bindable>Ignored: {{1 + 2}}</div>

ngPluralize

  1. <script>
  2.   angular.module('pluralizeExample', [])
  3.     .controller('ExampleController', ['$scope', function($scope) {
  4.       $scope.person1 = 'Igor';
  5.       $scope.person2 = 'Misko';
  6.       $scope.personCount = 1;
  7.     }]);
  8. </script>
  9. <div ng-controller="ExampleController">
  10.   Person 1:<input type="text" ng-model="person1" value="Igor" /><br/>
  11.   Person 2:<input type="text" ng-model="person2" value="Misko" /><br/>
  12.   Number of People:<input type="text" ng-model="personCount" value="1" /><br/>
  14.   <!--- Example with simple pluralization rules for en locale --->
  15.   Without Offset:
  16.   <ng-pluralize count="personCount"
  17.                 when="{'0': 'Nobody is viewing.',
  18.                        'one': '1 person is viewing.',
  19.                        'other': '{} people are viewing.'}">
  20.   </ng-pluralize><br>
  22.   <!--- Example with offset --->
  23.   With Offset(2):
  24.   <ng-pluralize count="personCount" offset=2
  25.                 when="{'0': 'Nobody is viewing.',
  26.                        '1': '{{person1}} is viewing.',
  27.                        '2': '{{person1}} and {{person2}} are viewing.',
  28.                        'one': '{{person1}}, {{person2}} and one other person are viewing.',
  29.                        'other': '{{person1}}, {{person2}} and {} other people are viewing.'}">
  30.   </ng-pluralize>
  31. </div>
  1.  

ngRepeat

ngRepeat 从一个集合中一次指令实例化一个模板，每个实例模板都拥有一个自己的作用域（$scope）。在当前的集合中循环出一个变量。用$index来设置索引或者一个Key.
 
 
每一个模板都包含一个特殊的属性在本地作用域中。
Variable Type Details
$index number 遍历变量
$first boolean 迭代器遍历出来的第一个
$middle boolean 迭代器出来在第一个与最后一个中间的
$last boolean 迭代出来的最后一个
$even boolean 遍历出来的偶数
$odd boolean 遍历出来的基数
 

ngSwitch

  1. <div ng-controller="ExampleController">
  2.   <select ng-model="selection" ng-options="item for item in items">
  3.   </select>
  4.   <tt>selection={{selection}}</tt>
  5.   <hr/>
  6.   <div class="animate-switch-container"
  7.     ng-switch on="selection">
  8.       <div class="animate-switch" ng-switch-when="settings">Settings Div</div>
  9.       <div class="animate-switch" ng-switch-when="home">Home Span</div>
  10.       <div class="animate-switch" ng-switch-default>default</div>
  11.   </div>
  12. </div>
angular.module('switchExample', ['ngAnimate'])
.controller('ExampleController', ['$scope', function($scope) {

  1.     $scope.items = ['settings', 'home', 'other'];
  2.     $scope.selection = $scope.items[0];
  3.   }]);

ngTransclude

  1. <script>
  2.   angular.module('transcludeExample', [])
  3.    .directive('pane', function(){
  4.       return {
  5.         restrict: 'E',
  6.         transclude: true,
  7.         scope: { title:'@' },
  8.         template: '<div >' +
  9.                     '<div >{{title}}</div>' +
  10.                     '<ng-transclude></ng-transclude>' +
  11.                   '</div>'
  12.       };
  13.   })
  14.   .controller('ExampleController', ['$scope', function($scope) {
  15.     $scope.title = 'Lorem Ipsum';
  16.     $scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
  17.   }]);
  18. </script>
  19. <div ng-controller="ExampleController">
  20.   <input ng-model="title"><br>
  21.   <textarea ng-model="text"></textarea> <br/>
  22.   <pane title="{{title}}">{{text}}</pane>
  23. </div>

script

<script>里的内容加载到 $templateCache，这样ngInclude，ngView, or directives就可以使用模板了。
<script>元素必须特别指定text/ng-template。这个缓存的名字的模板必须存在一个元素的id．然后它就可使被templateUrl使用。
  1. <script type="text/ng-template" id="/tpl.html">
  2.   Content of the template.
  3. </script>
  5. <a ng-click="currentTpl='/tpl.html'" id="tpl-link">Load inlined template</a>
  6. <div id="tpl-content" ng-include src="currentTpl"></div>

Angular 下的 directive （part 2）的更多相关文章

  1. Angular 下的 directive （part 1）

    directive  指令 Directive components  指令部分   使用指令自动引导一个AngularJS应用.ngApp指令指定应用程序的根元素,通常是放在页面的根元素如: < ...

  2. angular下H5上传图片（可多张上传）

    最近做的项目中用到了angular下上传图片功能,在做的过程中遇到了许多问题,最终都得以解决 angular上传时和普通上传时过程差不多,只不过是要不一些东西转化为angular的东西. 1.ng-f ...

  3. angular Creating a Directive that Adds Event Listeners

    <span my-draggable>Drag ME</span> angular.module('dragModule', []) .directive('myDraggab ...

  4. angular 自定义指令 directive transclude 理解

    项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...

  5. Angular自定义指令directive:scope属性

    在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...

  6. Angular之指令Directive系列

    项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐Angualr实战学习视频大漠穷秋 Angular实战 一.指令directive概述 指令可以对元素绑定事件监听或者改变DOM结构 ...

  7. angular插件制作——Directive指令使用详解

    1.replace——最简单的使用方法,直接将自定义标签替换为模板内的内容:  html: <!DOCTYPE html> <html> <head> <me ...

  8. Angular 下的 function

    angular.lowercas 将指定的字符串转换为小写的 Usage(使用方法) angular.lowercase(string);   Arguments Param Type Details ...

  9. angular之自定义 directive

    1,指令的创建至少需要一个带有@Directive装饰器修饰的控制器类.@Directive装饰器指定了一个选择器名称,用于指出与此指令相关联的属性的名字. 2,创建一个highlight.direc ...

随机推荐

  1. 【转】Cocos2d-x 3.x基础学习: 总结数学类Vec2/Size/Rect

    转载:http://www.taikr.com/article/1847 在Cocos2d-x 3.x中,数学类Vec2.Size.Rect,是比较常用的类.比如设置图片位置,图片大小,两图片的碰撞检 ...

  2. Mistakes I Made（as a developer）...大龄程序员的忠告...(部分转...)

    在2006年,我开始了编程工作.当意识到来到了十年这个重要的时间关口时,我觉得有必要回顾一下这十年间所犯下的错误,做一做经验总结,并且给正在这个职业上奋斗的人们提出我的一些忠告.开发行业变化得很快,我 ...

  3. Linux下C语言编程基础学习记录

    VIM的基本使用  LINUX下C语言编程 用gcc命令编译运行C语言文件 预处理阶段:将*.c文件转化为*.i预处理过的C程序. 编译阶段:将*.i文件编译为汇编代码*.s文件. 汇编阶段:将*.s ...

  4. C++中清空缓冲区

    C++中标准输入cin有多种输入方式.. 这篇文章罗列的还是简要易懂的.C++输入cin详解...如果只是简单的使用cin>>的话,会单个token的读入.但是会忽略换行符,空格,制表符等 ...

  5. 团队作业(五)-笔记app top5

    在互联网快速发展的情况下,各个行业的软件层出不穷,五花八门.各个行业都有相当多的软件介入其中,在如此多的软件之中,便有了相当激烈的竞争角逐.今天我们十五万的总冠军就着笔记APP行业中位列top 5的软 ...

  6. 两个简单的动态规划问题，0-1背包和最大不相邻数累加和，附递归c代码

    最近面试经常被问到动态规划,所以自己做了一个总结,希望能进行深入的理解然后尝试能不能找到通用的解决手段.我觉得动态规划思想好理解,难的是怎么找出全部并且合理的子问题和出口. 我一般把问题分为两类,一类 ...

  7. Linux基础四(服务管理)

    目录 一.简介与分类 1.系统的默认运行级别 2.服务的分类 3.服务与端口 二.服务管理 1.RPM包服务管理 2.源码包服务管理 三.服务管理总结 一.简介与分类 1. 系统的运行级别 1.1 默 ...

  8. Git 使用中显示“Another git process seems to be running in this repository...”问题解决

    一.引言:问题回忆 这几天,我同时在使用vs2017自带的git管理工具和git bash命令行工具对于同一个工作区进行了git操作管理. 其中,当我在vs2017中对文件进行了更改,突然脑洞大开,想 ...

  9. Eclipse Job

    Job可以我们基于Eclipse的Java程序中,我们有很多种方式提供多任务的实现.熟悉Java的朋友立即会想到Java的Thread类,这是Java中使 用最多的一个实现多任务的类.Eclipse平 ...

  10. 【刷题】LOJ 6223 「网络流 24 题」汽车加油行驶问题

    题目描述 给定一个 \(\text{N}\times \text{N}\) 的方形网格,设其左上角为起点◎,坐标为 \(\text{(1,1)}\) ,\(\text{X}\) 轴向右为正, \(\t ...