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或者表达式注册构造函数名字，对当前范围评估一个构造函数。
如果当前$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:
<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。
此外，浏览器 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>元素必须特别指定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>Angular 下的 directive （part 2）的更多相关文章
- Angular 下的 directive （part 1）
directive 指令 Directive components 指令部分 使用指令自动引导一个AngularJS应用.ngApp指令指定应用程序的根元素,通常是放在页面的根元素如: < ...
- angular下H5上传图片（可多张上传）
最近做的项目中用到了angular下上传图片功能,在做的过程中遇到了许多问题,最终都得以解决 angular上传时和普通上传时过程差不多,只不过是要不一些东西转化为angular的东西. 1.ng-f ...
- angular Creating a Directive that Adds Event Listeners
<span my-draggable>Drag ME</span> angular.module('dragModule', []) .directive('myDraggab ...
- angular 自定义指令 directive transclude 理解
项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...
- Angular自定义指令directive:scope属性
在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...
- Angular之指令Directive系列
项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐Angualr实战学习视频大漠穷秋 Angular实战 一.指令directive概述 指令可以对元素绑定事件监听或者改变DOM结构 ...
- angular插件制作——Directive指令使用详解
1.replace——最简单的使用方法,直接将自定义标签替换为模板内的内容: html: <!DOCTYPE html> <html> <head> <me ...
- Angular 下的 function
angular.lowercas 将指定的字符串转换为小写的 Usage(使用方法) angular.lowercase(string); Arguments Param Type Details ...
- angular之自定义 directive
1,指令的创建至少需要一个带有@Directive装饰器修饰的控制器类.@Directive装饰器指定了一个选择器名称,用于指出与此指令相关联的属性的名字. 2,创建一个highlight.direc ...
随机推荐
- Hyperledger Fabric v1.1.0安装记录（国内源版）
1. 安装虚拟机 虚拟机软件采用:VirtualBox 操作系统选择:Ubuntu 14.04 内存:4G CPU:2核 硬盘:20G 2.(可选)更改 ...
- 如何将maven项目打包上传到私服
比如我们想要把项目通过maven生产源码包和文档包并发布到自己的私服上,有两个maven插件可以做到这些工作,一个是maven-source-plugin,另一个是maven-javadoc-plug ...
- 实验---反汇编一个简单的C程序（杨光）
反汇编一个简单的C程序 攥写人:杨光 学号:20135233 ( *原创作品转载请注明出处*) ( 学习课程:<Linux内核分析>MOOC课程http://mooc.study.163 ...
- Hamburger
Bread: 我觉得舒婷解决问题的思路还是很不错的,对于java 的窗口框架也是很熟悉,打码速度也快了很多. Meat:但是我发现你在命名的时候会出现随意的现象,如果命名只有你自己看得懂的话,那么会增 ...
- linux终端FQ
工具列表: shadowsocks - QT5 ss账号 proxychains 使用过程: 1.用shadowsocks - QT5登入ss,设置本机端口1080 2.proxychains的使用 ...
- Log4Net使用指南之用log4net记录日志到数据库（含有自定义属性）------附Demo例子源代码
Log4NET简介 log4net库是Apache log4j框架在Microsoft .NET平台的实现,是一个帮助程序员将日志信息输出到各种目标(控制台.文件.数据库等)的工具. 前提 最近做项目 ...
- # 蜗牛慢慢爬 LeetCode 21. Merge Two Sorted Lists [Difficulty: Easy]
题目 Merge two sorted linked lists and return it as a new list. The new list should be made by splicin ...
- [转帖]2019 简易Web开发指南
2019 简易Web开发指南 2019年即将到来,各位同学2018年辛苦了. 不管大家2018年过的怎么样,2019年还是要继续加油的! 在此我整理了个人认为在2019仍是或者将成为主流的技术 ...
- Windows下多线程编程(二)
线程的分类 1. 有消息循环线程 MFC中有用户界面线程,从CWinThread派生出一个新的类作为UI线程类CUIThread,然后调用AfxBeginthread(RUNTIME_CLAS ...
- 部分机器进入bios 的 方法