Home > Developer > Web Develop
First, we have to understand the next instruction API
| Properties | Meaning |
| Restrict | Declare identifiers in the template as elements, attributes, classes, comments or combinations, how to use |
| Priority | To set the order of execution in a template relative to other identifiers |
| Template | Specify a string inline template, if you specify a template is a URL, then it will not be used |
| Tempateurl | Specifies the URL-loaded template, if you have specified an inline template string, it will not use the |
| Replace | If true, replaces the current element if it is false or unspecified, stitching it to the current element |
| Transclude | Move the original byte of an identifier take you to the location of a new template |
| Scope | Create a new scope for this identifier, rather than inheriting the parent scope |
| Controller | Create a controller to expose the communication API through identifiers |
| Require | The current identifier requires an additional identifier to provide the correct function function |
| Link | Modify the instance of the target DOM element by code, add event listener, establish data binding |
| Compile | modifying DOM templates with identifier copy programming |
Here, we simply understand the meaning of each attribute and its simple role, and we'll explain it in a few inspirational words.
Next, let's take a look at the instruction definition object
The Restrict:restrict property allows you to specify a declaration style for an identifier, which means it can be an element name, attribute, class, or comment. We can use a string to represent each flag in the following table to specify
One or more declaration styles
| Sign | Style | Example |
| E | Element | <my-menu title= ' Products ' ></my-menu> |
| A | Attribute | <div my-menu= ' products ' ></div> |
| C | Class | <div class= ' my-menu:products ' ></div> |
| M | Comment | <!--Directive:my-menu products--> |
If you want identifiers as elements of the latter attribute, you can pass the EA as a restrict string
If the Restrict attribute is omitted, the default is a, see the angular document for details
Priorities: Specifies the order for the application, the higher the value, the first to run, the default is zero, and in general, no priority needs to be set
Templates: When you create a component, angular allows you to replace and wrap the contents of the element in the template, if you want to create a label view like this
Instead of using a string of elements such as <div><ul><li><a>, you can create identifiers <tab-set><tab> by customizing them, declaring the structure of each tab individually. Maybe if the next
<tab-set><tab title= ' Home ' ><p>welcome home!</p></tab><tab title= ' Preferences ' ><!--Preferences UI goes here--></tab></tabset>
Next, let's take a look at the temp lvl or the Templateurl property, specifying the replacement DOM element. In the table above, we see a string that the template can use to set the template content.
Templateurl is used to specify the server files that will be loaded, as shown in the next example, we can pre-cache these templates, reduce the number of get requests over and over again, improve performance
Create
var appmodule = angular.module (' app ', []); Appmodule.directive (' Hello ', function () {return {restrict: ' E ', Template: ' <div>hi there</div> ', replace:true};});
After loading into the browser, we will see hi there, by viewing the page source, we will still see<body><div>hi there</div></body>
Rather than using the template to input HTML into the string is not very meaningful, we will generally use Templateurl, to set the appropriate head cache
var appmodule = angular.module (' app ', []); Appmodule.directive (' Hello ', function () {return {restrict: ' E ', Templateurl: ' Hellotemplate.html ', replace:true};});
In hellotemplate.html, we need to write<div> Hi there</div>
If you use a Chrome browser, the same-origin policy may cause an error "origin null is not a allowed by Access-controll-allow-origin". Here you have two options.1. Loading apps from the server
Set a flag in 2.chrome to resolve by command line ' Chrome-allow-file-access-from-files '
Then loading the file via Templateurl will cause the user to wait to know when the load is seen, and if you want to load the template the first time the page loads, you can make it part of the page in the Script tab, as follows
<script type= ' text/ng-template ' id= ' hellotemplateinline.html ' ><div>hi there</div></script >
The id attribute here is very important, because is the URL key, angular uses it to save the template, you should use the ID in the identifier's templateurl to specify insert that templateAnd we can load the template through $http or several other mechanisms, and then set it directly to the $templatecache object used by angular, and call it through the run function so that the template will be in
Available in cache
var appmodule = angular.module (' app ', []); Appmodule.run (function ($templateCache) {$templateCache. put (' Hellotemplatecached.html ', ' <div>hi there</div> '); Appmodule.directive (' Hello ', function () {return {restrict: ' E ', Templateurl: ' hellotemplatecached.html ', replace:true };});Transclusion (embedding included)
Moving the original content through the Transclude property into the new template, when set to True, the identifier removes the original content and inserts it back into the template with the ng-transclude identifier
To modify an example by using transclusion mode:
Appmodule.directive (' Hello ', function () {return {Template: ' <div>hi there <span ng-transclude></span ></div> ', transclude:true};});
Application in:
<div hello>bob</div>
We'll see ' Hi there Bob. '
Compiling and linking functions
Although the Insert template is useful, the real meaningful work in any identifier happens in the Compile live link function
The function of compiling and linking is angular the latter two stages of creating a live view for a reference, so let's take a look at a high-level view of the angular initialization process, in order
"1" Script load: Load angular, find Ng-app identifier find app bindings
"2" compilation phase: At this stage, angular facilitates all registered flags in the DOM logo template, for each identifier, based on the rules of the identifier (Template,replace,transclude, etc.) to transform the DOM, and then
If a compiler function exists, it is called, resulting in a compiled template function, which invokes all identifiers collected by link Hansu
"3" link stage: In order for the view to move, angular runs the link function for each identifier, and the link function typically creates listeners on the DOM or model that keep the view and model consistently
So at the compile stage, it handles the transformation of the template, the link stage, which handles the modification of the data in the view, along these lines, the main difference between the table one function and the link function in the identifier is that the link function transforms the template itself, and the connection function creates a dynamic link on the model and view, in the second stage, The scope scpoes is appended to the link function of the compilation process, and through data binding, the identifier becomes alive
Second, scope
Three options for getting scope scope
1. Scopes that already exist in the identifier DOM element
2, create a new scope that inherits the enclosing controller scope to read all the values of the tree scope.
3. Independent action, do not inherit any attributes from the parent class, when you need to isolate the operation of this identifier and the scope of the parent class, create a build that can be used to use this option
We can create these scope configurations with the following syntax classes
| Existing scopes | Scope:false (This is the default value if not specified) |
| New Scope | Scope:true |
| Independent scopes | scope:{attribute rank and binding style} |
Note: Although independent scopes do not inherit model properties, they are still child nodes of the parent scope and $parent point to the parent class
We can pass the specified property to the parent class through the key value of the identifier property to the independent scope, there are three ways to pass the data from the parent scope, we call these data transfer methods called "Binding policy", you can specify a local alias for this property name
The syntax without aliases is as follows:
Scope: {attributeName1: ' Binding_strategy ', attributeName2: ' Binding_strategy ', ...}Scope: {attributealias: ' binding_strategy ' + ' Templateattributename ',...}| Symbol | Significance |
| @ | Passing string properties, you can bind data from a chalk scope by using the override {{}} property value |
| = | Data binding properties in the attribute of the parent scope of the identifier |
| & | Passes a function from the parent scope, which is called later |
Here we use a specific example of the changes to illustrate them, such as we want to create a expander identifier, display a title bar, when clicked to expand the display of additional content
When it's closed.
State of Open
The code is as follows:
<div ng-controller= ' somecontroller ' ><expander class= ' expander ' expander-title= ' title ' >{{text}}</ Expander></div>function Somecontroller ($scope) {$scope. title = ' Click me to expand '; $scope. Text = ' Hi there folks, I am the content+ ' tha T was hidden and is now shown. ';}Angular.module (' Expandermodule ', []). directive (' Expander ', function () {return {restrict: ' EA ', replace:true, Transclude:true,scope: {title: ' =expandertitle '}, Template: ' <div> ' + ' <div class= ' title ' ng-click= ' Toggle () ' >{{title}}</div> ' + ' <div class= "body" ng-show= "showMe" ng-transclude></div> ' + ' </div> ', Link:function (scope, element, attrs) {scope.showme = False;scope.toggle = function Toggle () {Scope.showme =!scope.showme ;}}}});. expander {border:1px solid black;width:250px;}. Expander >. title {background-color:black;color:white; padding:. 1em. 3em; cursor:pointer;}. Expander > Body {padding:. 1em. 3em;}| function name | |
| restrict:ea | describes the invocation identifier as an element or attribute, that is, <expander> </expander> or <div expander>...</div> |
| replace:true | replace the original meta with the provided template Vegetarian |
| transclude:true | Move the original element content to another place in the provided template |
| scope:{title:=e Xpandertitle}} | creates a local scope property called title, which is used to bind data to the Parent-scope attribute declared in the Expander-title property, where In order to conveniently name as title, because Expandertitle in the template, we expandertitle the blood scope Scope:{expandertitle: ' = '} to reference it, but in this scenario, the other identifiers are also There is a title property, in order to prevent ambiguity, we rename it |
| template:<div>+ | provide the template that will be inserted for the identifier, note that we use Ng-click and ng- Show to show or hide itself, ng-transclude to declare where the original content will go, Also note that the embedded content can access the parent scope instead of the enclosing identifier's scope |
| Link: | establishes the SHOWME model, tracks the open and closed state of Expander, and then invokes the defined toggle function |
| Function | Describe |
| Controller (name) | Communicates directly with the controller, which returns the controller that is bound to the element If this element does not exist, it will traverse the DOM and then find the nearest parent control If the parameter name is optional, it is used to specify the consent element on the other Identifier name, if provided, returns the controller on the identifier, the name Should use hump, that is to say, replace Ng-model with Ngmodel |
| Injector () | Gets the current element or the injector of the parent element, allowing the lookup of dependencies in these modules |
| Scope () | Returns the current element or the scope of the nearest parent element |
| Inheriteddata () | Like the data () function of jquery, Inheriteddata () sets and gets the elements in a closed manner. Data, in addition to getting data from the current element, it facilitates DOM lookups |
In the following example, we do not need to ng-show and Ng-click to re-implement the previous expander example
Angular.module (' Expandermodule ', []). directive (' Expander ', function () {return {restrict: ' EA ', replace:true, Transclude:true,scope: {title: ' =expandertitle '}, Template: ' <div> ' + ' <div class= ' title ' >{{title}}</ Div> ' + ' <div class= "body closed" ng-transclude></div> ' + ' </div> ', link:function (scope, element, Attrs) {var titleelement = angular.element (Element.children (). EQ (0)); var bodyelement = Angular.element ( Element.children (). EQ (1)); Titleelement.bind (' click ', toggle); function Toggle () {bodyelement.toggleclass (' closed ') ;}}}});To add or remove closed classes, we will set this element class to Displat:none
. closed {Display:none;}Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
