<a href='https://github.com/angular/angular.js/edit/v1.3.x/docs/content/guide/directive.ngdoc?message=docs(guide%2FDirectives)%3A%20describe%20your%20change...' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit"> </i>Improve this Doc</a>
<h1 id="creating-custom-directives">Creating Custom Directives</h1>
<div class="alert alert-warning">
<strong>Note:</strong> this guide is targeted towards developers who are already familiar with AngularJS basics.
If you're just getting started, we recommend the <a href="tutorial/">tutorial</a> first.
If you're looking for the <strong>directives API</strong>, we recently moved it to <a href="api/ng/service/$compile"><code>$compile</code></a>.
</div>
<p>This document explains when you'd want to create your own directives in your AngularJS app, and
how to implement them.</p>
<h2 id="what-are-directives-">What are Directives?</h2>
<p>At a high level, directives are markers on a DOM element (such as an attribute, element
name, comment or CSS class) that tell AngularJS's <strong>HTML compiler</strong> (<a href="api/ng/service/$compile"><code>$compile</code></a>) to
attach a specified behavior to that DOM element or even transform the DOM element and its children.</p>
<p>Angular comes with a set of these directives built-in, like <code>ngBind</code>, <code>ngModel</code>, and <code>ngClass</code>.
Much like you create controllers and services, you can create your own directives for Angular to use.
When Angular <a href="guide/bootstrap">bootstraps</a> your application, the
<a href="guide/compiler">HTML compiler</a> traverses the DOM matching directives against the DOM elements.</p>
<div class="alert alert-info">
<strong>What does it mean to "compile" an HTML template?</strong>
For AngularJS, "compilation" means attaching event listeners to the HTML to make it interactive.
The reason we use the term "compile" is that the recursive process of attaching directives
mirrors the process of compiling source code in
<a href="http://en.wikipedia.org/wiki/Compiled_languages">compiled programming languages</a>.
</div>
<h2 id="matching-directives">Matching Directives</h2>
<p>Before we can write a directive, we need to know how Angular's <a href="guide/compiler">HTML compiler</a>
determines when to use a given directive.</p>
<p>In the following example, we say that the <code><input></code> element <strong>matches</strong> the <code>ngModel</code> directive.</p>
<pre><code class="lang-html"><input ng-model="foo">
</code></pre>
<p>The following also <strong>matches</strong> <code>ngModel</code>:</p>
<pre><code class="lang-html"><input data-ng:model="foo">
</code></pre>
<p>Angular <strong>normalizes</strong> an element's tag and attribute name to determine which elements match which
directives. We typically refer to directives by their case-sensitive
<a href="http://en.wikipedia.org/wiki/CamelCase">camelCase</a> <strong>normalized</strong> name (e.g. <code>ngModel</code>).
However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case
forms, typically using <a href="http://en.wikipedia.org/wiki/Letter_case#Computers">dash-delimited</a>
attributes on DOM elements (e.g. <code>ng-model</code>).</p>
<p>The <strong>normalization</strong> process is as follows:</p>
<ol>
<li>Strip <code>x-</code> and <code>data-</code> from the front of the element/attributes.</li>
<li>Convert the <code>:</code>, <code>-</code>, or <code>_</code>-delimited name to <code>camelCase</code>.</li>
</ol>
<p>Here are some equivalent examples of elements that match <code>ngBind</code>:</p>
<p>
<div>
<a ng-click="openPlunkr('examples/example-example7')" class="btn pull-right">
<i class="glyphicon glyphicon-edit"> </i>
Edit in Plunker</a>
<div class="runnable-example"
path="examples/example-example7"
module="docsBindExample">
<div class="runnable-example-file"
name="script.js"
language="js"
type="js">
<pre><code>angular.module('docsBindExample', []) .controller('Controller', ['$scope', function($scope) { $scope.name = 'Max Karl Ernst Ludwig Planck (April 23, 1858 – October 4, 1947)'; }]);</code></pre>
</div>
<div class="runnable-example-file"
name="index.html"
language="html"
type="html">
<pre><code><div ng-controller="Controller"> Hello <input ng-model='name'> <hr/> <span ng-bind="name"></span> <br/> <span ng:bind="name"></span> <br/> <span ng_bind="name"></span> <br/> <span data-ng-bind="name"></span> <br/> <span x-ng-bind="name"></span> <br/> </div></code></pre>
</div>
<div class="runnable-example-file"
name="protractor.js"
type="protractor"
language="js">
<pre><code>it('should show off bindings', function() { expect(element(by.css('div[ng-controller="Controller"] span[ng-bind]')).getText()) .toBe('Max Karl Ernst Ludwig Planck (April 23, 1858 – October 4, 1947)'); });</code></pre>
</div>
<iframe class="runnable-example-frame" src="examples/example-example7/index.html" name="example-example7"></iframe>
</div>
</div>
</p>
<div class="alert alert-success">
<strong>Best Practice:</strong> Prefer using the dash-delimited format (e.g. <code>ng-bind</code> for <code>ngBind</code>).
If you want to use an HTML validating tool, you can instead use the <code>data</code>-prefixed version (e.g.
<code>data-ng-bind</code> for <code>ngBind</code>).
The other forms shown above are accepted for legacy reasons but we advise you to avoid them.
</div>
<p><code>$compile</code> can match directives based on element names, attributes, class names, as well as comments.</p>
<p>All of the Angular-provided directives match attribute name, tag name, comments, or class name.
The following demonstrates the various ways a directive (<code>myDir</code> in this case) can be referenced
from within a template:</p>
<pre><code class="lang-html"><my-dir></my-dir>
<span my-dir="exp"></span>
<!-- directive: my-dir exp -->
<span class="my-dir: exp;"></span>
</code></pre>
<div class="alert alert-success">
<strong>Best Practice:</strong> Prefer using directives via tag name and attributes over comment and class names.
Doing so generally makes it easier to determine what directives a given element matches.
</div>
<div class="alert alert-success">
<strong>Best Practice:</strong> Comment directives were commonly used in places where the DOM API limits the
ability to create directives that spanned multiple elements (e.g. inside <code><table></code> elements).
AngularJS 1.2 introduces <a href="api/ng/directive/ngRepeat"><code>ng-repeat-start</code> and <code>ng-repeat-end</code></a>
as a better solution to this problem. Developers are encouraged to use this over custom comment
directives when possible.
</div>
<h3 id="text-and-attribute-bindings">Text and attribute bindings</h3>
<p>During the compilation process the <a href="api/ng/service/$compile">compiler</a> matches text and attributes
using the <a href="api/ng/service/$interpolate">$interpolate</a> service to see if they contain embedded
expressions. These expressions are registered as <a href="api/ng/type/$rootScope.Scope#$watch">watches</a>
and will update as part of normal <a href="api/ng/type/$rootScope.Scope#$digest">digest</a> cycle. An
example of interpolation is shown below:</p>
<pre><code class="lang-html"><a ng-href="img/{{username}}.jpg">Hello {{username}}!</a>
</code></pre>
<h3 id="-ngattr-attribute-bindings"><code>ngAttr</co
AngularJS 1.3 正式版 （2000个子文件） 
bootstrap.css 118KB bootstrap.min.css 98KB bootstrap-theme.css 15KB bootstrap-theme.min.css 13KB docs.css 11KB open-sans.css 5KB doc_widgets.css 3KB sunburst.css 2KB desert.css 2KB prettify.css 2KB prettify.css 2KB sons-of-obsidian.css 1KB prettify-theme.css 1KB animations.css 760B animations.css 707B animations.css 689B animations.css 618B style.css 504B animations.css 483B animations.css 449B style.css 379B animations.css 375B style.css 333B angular-csp.css 263B animations.css 242B style.css 224B style.css 153B style.css 120B style.css 119B style.css 108B glyphicons.css 86B glyphicons.css 86B app.css 68B style.css 59B style.css 59B style.css 33B style.css 30B animations.css 0B
directive.html 51KB ng.html 49KB migration.html 48KB $sce.html 41KB $httpBackend.html 40KB $location.html 37KB $compile.html 37KB $http.html 36KB $rootScope.Scope.html 35KB $animate.html 33KB ngModel.NgModelController.html 27KB scope.html 24KB forms.html 23KB concepts.html 23KB step_12.html 21KB ngAnimate.html 20KB directive.html 20KB compiler.html 19KB $httpBackend.html 19KB providers.html 18KB unit-testing.html 17KB $resource.html 17KB expression.html 17KB controller.html 17KB step_07.html 16KB $q.html 16KB guide.html 15KB inprog.html 14KB $provide.html 14KB faq.html 13KB di.html 13KB ngController.html 13KB select.html 13KB index-production.html 13KB $location.html 13KB step_05.html 13KB index-jquery.html 13KB angular.Module.html 13KB index.html 12KB index-debug.html 12KB services.html 12KB ngRepeat.html 12KB module.html 12KB $animate.html 12KB step_02.html 12KB tutorial.html 12KB ngPluralize.html 12KB animations.html 12KB step_11.html 11KB ngModelOptions.html 11KB $route.html 11KB $injector.html 11KB api.html 11KB input.html 10KB ngInclude.html 10KB ngMessages.html 10KB README.html 9KB ngClass.html 9KB ngView.html 9KB step_03.html 9KB filter.html 9KB orderBy.html 9KB共 2000 条
- 1
- 2
- 3
- 4
- 5
- 6
- 20
资源评论
