HOWTO · Angular
限制 AngularJS 中的自定义指令
限制指令通过向其添加属性来限制从外部 HTML 代码访问 DOM 元素或指令。本文将讨论如何在 AngularJS 中限制自定义指令。
本页内容
指令是一种特殊类型的 AngularJS 组件，用于扩展 HTML 元素的功能或创建具有丰富行为的新功能，这是纯 HTML 所不具备的。
AngularJS 包括预构建的指令，如 ngBind、ngModel 和 ngClass。Angular 框架使用这些指令来指示浏览器使用新的 HTML 标记。
HTML 标记和注释以及 CSS 类和属性都是指令的示例。
Restriction 指令通过向其添加属性来限制从外部 HTML 代码对 DOM 元素的访问。
本文将讨论如何在 AngularJS 中限制自定义指令。
AngularJS 指令限制 A 与 E
restrict 属性告诉 Angular 如何创建一个只有一个字母长的新指令。它可以有四个值：A、C、E、M，或这些值的组合，例如 EA、ME 等。
每一个都具有重要意义。
下面列出了限制值及其含义。
E表示它只能用作元素。A表示它只能用作属性。C仅作为类属性有效。M仅适用于评论。
假设指令的名称是 hello。以下是它们的种类和用法。
A = <div hello></div>
C = <div class="hello"></div>
E = <hello data="Demo"></hello>
M = <!--directive:hello -->
在开发负责模板的组件时，使用元素。当你为模板的各个方面构建域特定语言时，这是一种常见的情况。
向现有元素添加新功能时，请使用属性。
当利用属性而不是元素时，你可以将多个指令应用于同一个 DOM 节点。
这对于表单控件特别有用，你可以在其中使用其他属性来突出显示、禁用或添加标签，而不必包含许多标签的组件。
示例（JavaScript）：
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
app.directive('helloWorld',function(){
return {
replace:true,
restrict: 'E',
template: '<h2>Hello World</h2>'
}
});
示例（HTML）：
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8" />
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.7/angular.js" data-semver="1.2.7"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<hello-world></hello-world>
<div hello-world></div>
<div class="hello-world"></div>
</body>
</html>
点击这里查看代码的演示。
