Angular 下的 directive ，part 2

2023-07-29 23:13•杂谈•阅读 1307

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

Param	Type	Details
ngController	expression	$controllerProvider或者表达式注册构造函数名字，对当前范围评估一个构造函数。 `通过制定ng-controller="as propertyName"，控制力实例可以发布到一个范围的属性。` 如果当前$controllerProvider配置为使用全局变量(via `$controllerProvider.allowGlobals()`),就可以以全局名去访问构造函数（不被推荐）

$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:

<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"  />
  <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

使用的是prototypal inheritance.

如果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 type="text/ng-template" >
  Content of the template.
</script>

<a ng-click="currentTpl='/tpl.html'" >Load inlined template</a>
<div ></div>

上一篇 »[D3 + AngularJS] 15. Create a D3 Chart as an Angular Directive
下一篇 »angular学习的一些小笔记，中之directive

Angular 下的 directive ，part 2

ngController

Directive Info

Usage

Arguments

ngCsp

ngClick

Directive Info

Usage

Arguments

ngDblclick

Usage

ngMousedown，

ngMouseup，

ngMouseover，

ngMouseenter，

ngMouseleave，

ngMousemove，

ngKeydown：

ngKeyup：

ngKeypress：

ngSubmit：

ngFocus

ngBlur

ngCopy

Directive Info

ngCup

ngIf

ngInclude

ngNonBindable

ngPluralize

ngRepeat

ngSwitch

ngTransclude

script

相关推荐

[译]Exploring Angular 1.3: Binding to Directive Controllers

angular学习笔记，三十-指令

angular的GitHub Repository Directive Example学习

angular img标签使用err-src

，译 Angular运行原理揭秘 Part 1

[AngularJS] Consistency between ui-router states and Angular directives

[Angular + TsLint] Disable directive selector tslint error

【转】Angular运行原理揭秘 Part 1