Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance. Project price only 1 $
You can buy this project and download/modify it how often you want.
/\* ! VARIABLE/FUNCTION NAMING CONVENTIONS THAT APPLY TO THIS FILE!
-
- DOM-related variables:
-
- - "node" - DOM Node
- - "element" - DOM Element or Node
- - "$node" or "$element" - JQLite-wrapped node or element
-
-
- Compiler related stuff:
-
- - "linkFn" - linking fn of a single directive
- - "nodeLinkFn" - function that aggregates all linking fns for a particular node
- - "childLinkFn" - function that aggregates all linking fns for child nodes of a particular node
- - "compositeLinkFn" - function that aggregates all linking fns for a compilation root (nodeList)
\*/
/\*\*
- @ngdoc service
- @name $compile
- @kind function
-
- @description
- Compiles an HTML string or DOM into a template and produces a template function, which
- can then be used to link {@link ng.$rootScope.Scope `scope`} and the template together.
-
- The compilation is a process of walking the DOM tree and matching DOM elements to
- {@link ng.$compileProvider#directive directives}.
-
-
- **Note:** This document is an in-depth reference of all directive options.
- For a gentle introduction to directives with examples of common use cases,
- see the {@link guide/directive directive guide}.
-
-
- ## Comprehensive Directive API
-
- There are many different options for a directive.
-
- The difference resides in the return value of the factory function.
- You can either return a {@link $compile#directive-definition-object Directive Definition Object (see below)}
- that defines the directive properties, or just the `postLink` function (all other properties will have
- the default values).
-
-
- **Best Practice:** It's recommended to use the "directive definition object" form.
-
- **Note:** Any unspecified options will use the default value. You can see the default values below.
-
-
- Therefore the above can be simplified as:
-
- ```js
```
- let myModule = angular.module(...);
-
- myModule.directive('directiveName', function factory(injectables) {
- let directiveDefinitionObject = {
- link: function postLink(scope, iElement, iAttrs) { ... }
- };
- return directiveDefinitionObject;
- // or
- // return function postLink(scope, iElement, iAttrs) { ... }
- });
- ```
```
-
- ### Life-cycle hooks
- Directive controllers can provide the following methods that are called by AngularJS at points in the life-cycle of the
- directive.The following hooks can be defined on the controller prototype or added to the controller inside its constructor:
- - `$onInit()` - Called on each controller after all the controllers on an element have been constructed and
- had their bindings initialized (and before the pre & post linking functions for the directives on
- this element). This is a good place to put initialization code for your controller.
- - `$onChanges(changesObj)` - Called whenever one-way (`<`) or interpolation (`@`) bindings are updated. The
- `changesObj` is a hash whose keys are the names of the bound properties that have changed, and the values are an
- object of the form `{ currentValue, previousValue, isFirstChange() }`. Use this hook to trigger updates within a
- component such as cloning the bound value to prevent accidental mutation of the outer value. Note that this will
- also be called when your bindings are initialized.
- - `$doCheck()` - Called on each turn of the digest cycle. Provides an opportunity to detect and act on
- changes. Any actions that you wish to take in response to the changes that you detect must be
- invoked from this hook; implementing this has no effect on when `$onChanges` is called. For example, this hook
- could be useful if you wish to perform a deep equality check, or to check a Date object, changes to which would not
- be detected by AngularJS's change detector and thus not trigger `$onChanges`. This hook is invoked with no arguments;
- if detecting changes, you must store the previous value(s) for comparison to the current values.
- Changes to the model inside `$doCheck` will trigger new turns of the digest loop, which will cause the changes to be
- propagated throughout the application.
- - `$onDestroy()` - Called on a controller when its containing scope is destroyed. Use this hook for releasing
- external resources, watches and event handlers. Note that components have their `$onDestroy()` hooks called in
- the same order as the `$scope.$broadcast` events are triggered, which is top down. This means that parent
- components will have their `$onDestroy()` hook called before child components.
- - `$postLink()` - Called after this controller's element and its children have been linked. Similar to the post-link
- function this hook can be used to set up DOM event handlers and do direct DOM manipulation.
- Note that child elements that contain `templateUrl` directives will not have been compiled and linked since
- they are waiting for their template to load asynchronously and their own compilation and linking has been
- suspended until that occurs.
- #### Life-cycle hook examples
-
- This example shows how you can check for mutations to a Date object even though the identity of the object
- has not changed.
-
-
-
- angular.module('do-check-module', [])
- .component('app', {
- template:
- 'Month: ' +
- 'Date: {{ $ctrl.date }}' +
- '',
- controller: function() {
- this.date = new Date();
- this.month = this.date.getMonth();
- this.updateDate = function() {
- this.date.setMonth(this.month);
- };
- }
- })
- .component('test', {
- bindings: { date: '<' },
- template:
- '
{{ $ctrl.log | json }}
',
- controller: function() {
- let previousValue;
- this.log = [];
- this.$doCheck = function() {
- let currentValue = this.date && this.date.valueOf();
- if (previousValue !== currentValue) {
- this.log.push('doCheck: date mutated: ' + this.date);
- previousValue = currentValue;
- }
- };
- }
- });
-
-
-
-
-
-
- This example show how you might use `$doCheck` to trigger changes in your component's inputs even if the
- actual identity of the component doesn't change. (Be aware that cloning and deep equality checks on large
- arrays or objects can have a negative impact on your application performance.)
-
-
-
-
',
- controller: function() {
- this.log = [];
-
- this.$doCheck = function() {
- if (this.items_ref !== this.items) {
- this.log.push('doCheck: items changed');
- this.items_ref = this.items;
- }
- if (!angular.equals(this.items_clone, this.items)) {
- this.log.push('doCheck: items mutated');
- this.items_clone = structuredClone(this.items);
- }
- };
- }
- });
-
-
-
-
- ### Directive Definition Object
-
- The directive definition object provides instructions to the {@link ng.$compile
- compiler}. The attributes are:
-
- #### `multiElement`
- When this property is set to true (default is `false`), the HTML compiler will collect DOM nodes between
- nodes with the attributes `directive-name-start` and `directive-name-end`, and group them
- together as the directive elements. It is recommended that this feature be used on directives
- which are not strictly behavioral (such as {@link ngClick}), and which
- do not manipulate or replace child nodes (such as {@link ngInclude}).
-
- #### `priority`
- When there are multiple directives defined on a single DOM element, sometimes it
- is necessary to specify the order in which the directives are applied. The `priority` is used
- to sort the directives before their `compile` functions get called. Priority is defined as a
- number. Directives with greater numerical `priority` are compiled first. Pre-link functions
- are also run in priority order, but post-link functions are run in reverse order. The order
- of directives with the same priority is undefined. The default priority is `0`.
-
- #### `terminal`
- If set to true then the current `priority` will be the last set of directives
- which will execute (any directives at the current priority will still execute
- as the order of execution on same `priority` is undefined). Note that expressions
- and other directives used in the directive's template will also be excluded from execution.
-
- #### `scope`
- The scope property can be `false`, `true`, or an object:
-
- - **`false` (default):** No scope will be created for the directive. The directive will use its
- parent's scope.
-
- - **`true`:** A new child scope that prototypically inherits from its parent will be created for
- the directive's element. If multiple directives on the same element request a new scope,
- only one new scope is created.
-
- - **`{...}` (an object hash):** A new "isolate" scope is created for the directive's template.
- The 'isolate' scope differs from normal scope in that it does not prototypically
- inherit from its parent scope. This is useful when creating reusable components, which should not
- accidentally read or modify data in the parent scope. Note that an isolate scope
- directive without a `template` or `templateUrl` will not apply the isolate scope
- to its children elements.
-
- The 'isolate' scope object hash defines a set of local scope properties derived from attributes on the
- directive's element. These local properties are useful for aliasing values for templates. The keys in
- the object hash map to the name of the property on the isolate scope; the values define how the property
- is bound to the parent scope, via matching attributes on the directive's element:
-
- - `@` or `@attr` - bind a local scope property to the value of DOM attribute. The result is
- always a string since DOM attributes are strings. If no `attr` name is specified then the
- attribute name is assumed to be the same as the local name. Given ``and the isolate scope definition`scope: { localName:'@myAttr' }`,
- the directive's scope property `localName` will reflect the interpolated value of `hello
- {{name}}`. As the `name`attribute changes so will the`localName` property on the directive's
- scope. The `name` is read from the parent scope (not the directive's scope).
-
- - `=` or `=attr` - set up a bidirectional binding between a local scope property and an expression
- passed via the attribute `attr`. The expression is evaluated in the context of the parent scope.
- If no `attr` name is specified then the attribute name is assumed to be the same as the local
- name. Given `` and the isolate scope definition `scope: {
- localModel: '=myAttr' }`, the property `localModel` on the directive's scope will reflect the
- value of `parentModel` on the parent scope. Changes to `parentModel` will be reflected in
- `localModel` and vice versa. If the binding expression is non-assignable, or if the attribute
- isn't optional and doesn't exist, an exception
- ({@link error/$compile/nonassign `$compile:nonassign`}) will be thrown upon discovering changes
- to the local value, since it will be impossible to sync them back to the parent scope.
-
- By default, the {@link ng.$rootScope.Scope#$watch `$watch`}
- method is used for tracking changes, and the equality check is based on object identity.
- However, if an object literal or an array literal is passed as the binding expression, the
- equality check is done by value (using the {@link angular.equals} function). It's also possible
- to watch the evaluated value shallowly with {@link ng.$rootScope.Scope#$watchCollection
- `$watchCollection`}: use `=*` or `=*attr`
- - - `<` or `` and directive definition of
- `scope: { localModel:'` and the isolate scope definition `scope: {
- localFn:'&myAttr' }`, the isolate scope property `localFn` will point to a function wrapper for
- the `count = count + value` expression. Often it's desirable to pass data from the isolated scope
- via an expression to the parent scope. This can be done by passing a map of local variable names
- and values into the expression wrapper fn. For example, if the expression is `increment(amount)`
- then we can specify the amount value by calling the `localFn` as `localFn({amount: 22})`.
-
- All 4 kinds of bindings (`@`, `=`, `<`, and `&`) can be made optional by adding `?` to the expression.
- The marker must come after the mode and before the attribute name.
- See the {@link error/$compile/iscp Invalid Isolate Scope Definition error} for definition examples.
- This is useful to refine the interface directives provide.
- One subtle difference between optional and non-optional happens \*\*when the binding attribute is not
- set\*\*:
- - the binding is optional: the property will not be defined
- - the binding is not optional: the property is defined
-
- ````js
*app.directive('testDir', function() {
return {
scope: {
notoptional: '=',
optional: '=?',
},
bindToController: true,
controller: function() {
this.$onInit = function() {
console.log(this.hasOwnProperty('notoptional')) // true
console.log(this.hasOwnProperty('optional')) // false
}
}
}
})
*```
````
-
-
- ##### Combining directives with different scope defintions
-
- In general it's possible to apply more than one directive to one element, but there might be limitations
- depending on the type of scope required by the directives. The following points will help explain these limitations.
- For simplicity only two directives are taken into account, but it is also applicable for several directives:
-
- - **no scope** + **no scope** => Two directives which don't require their own scope will use their parent's scope
- - **child scope** + **no scope** => Both directives will share one single child scope
- - **child scope** + **child scope** => Both directives will share one single child scope
- - **isolated scope** + **no scope** => The isolated directive will use it's own created isolated scope. The other directive will use
- its parent's scope
- - **isolated scope** + **child scope** => **Won't work!** Only one scope can be related to one element. Therefore these directives cannot
- be applied to the same element.
- - **isolated scope** + **isolated scope** => **Won't work!** Only one scope can be related to one element. Therefore these directives
- cannot be applied to the same element.
-
-
- #### `bindToController`
- This property is used to bind scope properties directly to the controller. It can be either
- `true` or an object hash with the same format as the `scope` property.
-
- When an isolate scope is used for a directive (see above), `bindToController: true` will
- allow a component to have its properties bound to the controller, rather than to scope.
-
- After the controller is instantiated, the initial values of the isolate scope bindings will be bound to the controller
- properties. You can access these bindings once they have been initialized by providing a controller method called
- `$onInit`, which is called after all the controllers on an element have been constructed and had their bindings
- initialized.
-
- It is also possible to set `bindToController` to an object hash with the same format as the `scope` property.
- This will set up the scope bindings to the controller directly. Note that `scope` can still be used
- to define which kind of scope is created. By default, no scope is created. Use `scope: {}` to create an isolate
- scope (useful for component directives).
-
- If both `bindToController` and `scope` are defined and have object hashes, `bindToController` overrides `scope`.
-
-
- #### `controller`
- Controller constructor function. The controller is instantiated before the
- pre-linking phase and can be accessed by other directives (see
- `require` attribute). This allows the directives to communicate with each other and augment
- each other's behavior. The controller is injectable (and supports bracket notation) with the following locals:
-
- - `$scope` - Current scope associated with the element
- - `$element` - Current element
- - `$attrs` - Current attributes object for the element
- - `$transclude` - A transclude linking function pre-bound to the correct transclusion scope:
- `function([scope], cloneLinkingFn, futureParentElement, slotName)`:
- - `scope`: (optional) override the scope.
- - `cloneLinkingFn`: (optional) argument to create clones of the original transcluded content.
- - `futureParentElement` (optional):
- * defines the parent to which the `cloneLinkingFn` will add the cloned elements.
- * default: `$element.parent()` resp. `$element` for `transclude:'element'` resp. `transclude:true`.
- * only needed for transcludes that are allowed to contain non html elements (e.g. SVG elements)
- and when the `cloneLinkingFn` is passed,
- as those elements need to created and cloned in a special way when they are defined outside their
- usual containers (e.g. like `
