Angular 下的 directive (part 2)

ngCloak

ngCloak指令被使用在,阻止angular模板从浏览器加载的时候出现闪烁的时候。使用它可以避免闪烁问题的出现。
 
该指令可以应用于<body>元素,但首选使用多个ngCloak指令应用于页面的一小部分,允许进步呈现的浏览器视图。
 
ngCloak工作与下面的css规则嵌入到角的合作。js和angular.min.js。请添加angular-csp CSP的模式。css,html文件(见ngCsp)。
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
当这个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:

<ANY
ng-controller="">
...
</ANY>
 

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错误登录控制台:
 
//这个在*网上查了一下,好像是说有问题,还有就是知道它是一个安全机制的东西,应该是如果浏览器有安全限制,用了它就可以解除限制,除了上面说的那两种方式除外。
 

ngClick

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

Directive Info

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

Usage

as attribute:
<ANY
ng-click="">
...
</ANY>
 

Arguments

Param Type Details
ngClick expression

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

ngDblclick

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

Usage

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

ngMousedown,

ngMouseup,

ngMouseover,

ngMouseenter,

ngMouseleave,

ngMousemove,

ngKeydown:

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

ngKeyup:

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

ngKeypress:

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

ngSubmit:

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

ngFocus

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

ngBlur

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

ngCopy

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

Directive Info

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

ngCup

指定自定义行为剪切事件。
 
//这个效果是: 默认的Input里面为 cut me 当你用鼠标选中这里面的文本ctrl+X的时候,就会触发。
<input ng-cut="cut=true" ng-init="cut=false; value='cut me'" ng-model="value">
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 数据绑定,那么就可以用这个方法。
<div>Normal: {{1 + 2}}</div>
<div ng-non-bindable>Ignored: {{1 + 2}}</div>

ngPluralize

<script>
angular.module('pluralizeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.person1 = 'Igor';
$scope.person2 = 'Misko';
$scope.personCount = 1;
}]);
</script>
<div ng-controller="ExampleController">
Person 1:<input type="text" ng-model="person1" value="Igor" /><br/>
Person 2:<input type="text" ng-model="person2" value="Misko" /><br/>
Number of People:<input type="text" ng-model="personCount" value="1" /><br/> <!--- Example with simple pluralization rules for en locale --->
Without Offset:
<ng-pluralize count="personCount"
when="{'0': 'Nobody is viewing.',
'one': '1 person is viewing.',
'other': '{} people are viewing.'}">
</ng-pluralize><br> <!--- Example with offset --->
With Offset(2):
<ng-pluralize count="personCount" offset=2
when="{'0': 'Nobody is viewing.',
'1': '{{person1}} is viewing.',
'2': '{{person1}} and {{person2}} are viewing.',
'one': '{{person1}}, {{person2}} and one other person are viewing.',
'other': '{{person1}}, {{person2}} and {} other people are viewing.'}">
</ng-pluralize>
</div>
 

ngRepeat

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

ngSwitch

<div ng-controller="ExampleController">
<select ng-model="selection" ng-options="item for item in items">
</select>
<tt>selection={{selection}}</tt>
<hr/>
<div class="animate-switch-container"
ng-switch on="selection">
<div class="animate-switch" ng-switch-when="settings">Settings Div</div>
<div class="animate-switch" ng-switch-when="home">Home Span</div>
<div class="animate-switch" ng-switch-default>default</div>
</div>
</div>
angular.module('switchExample', ['ngAnimate'])
.controller('ExampleController', ['$scope', function($scope) {
    $scope.items = ['settings', 'home', 'other'];
$scope.selection = $scope.items[0];
}]);

ngTransclude

<script>
angular.module('transcludeExample', [])
.directive('pane', function(){
return {
restrict: 'E',
transclude: true,
scope: { title:'@' },
template: '<div >' +
'<div >{{title}}</div>' +
'<ng-transclude></ng-transclude>' +
'</div>'
};
})
.controller('ExampleController', ['$scope', function($scope) {
$scope.title = 'Lorem Ipsum';
$scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
}]);
</script>
<div ng-controller="ExampleController">
<input ng-model="title"><br>
<textarea ng-model="text"></textarea> <br/>
<pane title="{{title}}">{{text}}</pane>
</div>

script

<script>里的内容加载到 $templateCache,这样ngInclude,ngView, or directives就可以使用模板了。
<script>元素必须特别指定text/ng-template。这个缓存的名字的模板必须存在一个元素的id.然后它就可使被templateUrl使用。
<script type="text/ng-template" id="/tpl.html">
Content of the template.
</script> <a ng-click="currentTpl='/tpl.html'" id="tpl-link">Load inlined template</a>
<div id="tpl-content" ng-include src="currentTpl"></div>
上一篇:win10桌面和手机的扩展API,判断是否有实体后退键API


下一篇:DIV+CSS 网页布局之:混合布局