-
AngularJS: Developer Guide: HTML Compiler
-
Angular’s HTML compiler allows the developer to teach the browser new HTML syntax. The compiler allows you to attach behavior to any HTML element or attribute and even create new HTML elements or attributes with custom behavior. Angular calls these behavior extensions directives.
-
-
Compile: traverse the DOM and collect all of the directives. The result is a linking function.
-
Link: combine the directives with a scope and produce a live view. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model. This makes the scope model the single source of truth.
Compiler
Compiler is an Angular service which traverses the DOM looking for attributes. The compilation process happens in two phases.
-
-
-
$compile
traverses the DOM and matches directives.If the compiler finds that an element matches a directive, then the directive is added to the list of directives that match the DOM element. A single element may match multiple directives.
-
Once all directives matching a DOM element have been identified, the compiler sorts the directives by their
priority
.Each directive’s
compile
functions are executed. Eachcompile
function has a chance to modify the DOM. Eachcompile
function returns alink
function. These functions are composed into a “combined" link function, which invokes each directive’s returnedlink
function. -
$compile
links the template with the scope by calling the combined linking function from the previous step. This in turn will call the linking function of the individual directives, registering listeners on the elements and setting up$watch
s with thescope
as each directive is configured to do.
HTML compilation happens in three phases:
-
-
var $compile = …; // injected into your code var scope = …; var parent = …; // DOM element where the compiled template can be appended var html = ‘<div ng-bind="exp"></div>’; // Step 1: parse HTML into DOM element var template = angular.element(html); // Step 2: compile the template var linkFn = $compile(template); // Step 3: link the compiled template with the scope. var element = linkFn(scope); // Step 4: Append to DOM (optional) parent.appendChild(element);
-
Note: Link means setting up listeners on the DOM and setting up
$watch
on the Scope to keep the two in sync. -
title: ‘@’, // the title uses the data-binding from the parent scope
-
-
AngularJS: Developer Guide: Directives
-
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 HTML compiler (
$compile
) to attach a specified behavior to that DOM element or even transform the DOM element and its children. -
When Angular bootstraps your application, the HTML compiler traverses the DOM matching directives against the DOM elements.
-
When using
ngAttr
, theallOrNothing
flag of $interpolate is used, so if any expression in the interpolated string results inundefined
, the attribute is removed and not added to the element. -
When should I use an attribute versus an element? Use an element when you are creating a component that is in control of the template. The common case for this is when you are creating a Domain-Specific Language for parts of your template. Use an attribute when you are decorating an existing element with new functionality.
-
Note: These
=attr
attributes in thescope
option of directives are normalized just like directive names. To bind to the attribute in<div bind-to-this="thing">
, you’d specify a binding of=bindToThis
. -
Best Practice: Use the
scope
option to create isolate scopes when making components that you want to reuse throughout your app. -
scope
is an Angular scope object.element
is the jqLite-wrapped element that this directive matches.attrs
is a hash object with key-value pairs of normalized attribute names and their corresponding attribute values.
Directives that want to modify the DOM typically use the
link
option.link
takes a function with the following signature,function link(scope, element, attrs) { ... }
where: -
Best Practice: Directives should clean up after themselves. You can use
element.on('$destroy', ...)
orscope.$on('$destroy', ...)
to run a clean-up function when the directive is removed. -
scope: { ‘close’: ‘&onClose’ },
-
The
&
binding allows a directive to trigger evaluation of an expression in the context of the original scope, at a specific time. -
Because of this,
&
bindings are ideal for binding callback functions to directive behaviors. -
The
myPane
directive has arequire
option with value^myTabs
. When a directive uses this option,$compile
will throw an error unless the specified controller is found. The^
prefix means that this directive searches for the controller on its parents (without the^
prefix, the directive would look for the controller on just its own element). -
If it is necessary to reference the controller or any functions bound to the controller’s scope in the template, you can use the option
controllerAs
to specify the name of the controller as an alias. -
The basic difference is that
controller
can expose an API, andlink
functions can interact with controllers usingrequire
.
-
-
EasyCriteria 2.0 – JPA Criteria should be easy | uaiHebert (:
-
Java Persistence/Advanced Topics – Wikibooks, open books for an open world
-
A database
VIEW
is a virtual view of a table or query. Views are useful for hiding the complexity of a table, set of tables, or data-set.In JPA you can map to a
VIEW
the same as a table, using the@Table
annotation.
-
-
Activity stream | Patterns | Atlassian Design Guidelines
-
Each activity stream entry is timestamped, and usually has an actor, an action, and a subject or object of the action.
-
Activity streams typically surface links to the objects they reference, so users can click through to the application for more information.
-
-
《AngularJS》5个实例详解Directive(指令)机制 – 天上的神明与星辰,人间的艺术和真纯,我们所敬畏和热爱的,莫过于此。 – ITeye技术网站
-
Angular到底是如何进行替换的呢?嗯嗯,这个过程分2个阶段,也就是本节标题所说的compile(编译)和link(连接)了。
-
比方说,你有一些事件需要绑定到某个元素上,那么你需要提供一个link函数
-
八月 30, 2014
Diigo Diary 08/30/2014
發表迴響 »
仍無迴響。
發表迴響