The element parameter needs to be replaced with a recursively-compiled template, and for this, you will employ the service. This service accepts a template as a parameter and returns a function that you will invoke with the current scope inside the directive's function. The template is retrieved from by the key, and then it's compiled. When the compiler reaches the nested directive, the recursive directive is realized all the way down through the data in the recursive object.
There's more… This recipe demonstrates the power of constructing a directive to convert a complex data object into a large DOM object. Relevant portions can be broken into individual templates, handled with distributed directive logic, and combined together in an elegant fashion to maximize modularity and reusability. See also f The Optional nested directive controllers recipe covers vertical communication between directives through their controller objects 43 www.
When a parent node is deleted, the lower directives are still bound to the data object and the removal propagates through cleanly. The meatiest and most important part of this directive is, of course, the function. Here, the function determines whether the node has any children which simply checks for the existence of an array in the local data node and declares the deleting method, which simply removes the relevant portion from the recursive object and cleans up the local node.
Up until this point, there haven't been any recursive calls, and there shouldn't need to be. If your directive is constructed correctly, AngularJS data binding and inherent template management will take care of the template cleanup for you.
This, of course, leads into the nal line of the function, which is broken up here for readability: 42 www. To make more sense of this, examine the following directive code: With all of this, if you provide the recursive directive with the data object provided at the beginning of this recipe, it will result in the following presented here without the auto-added AngularJS comments and directives : 40 www.
The reason for this is that each level of the directive can instantiate directives inside it and convert them from an uncompiled template to real DOM material.
The angular. It accepts a string template or DOM fragment and returns a jqLite object that can be modi ed, inserted, or compiled for your purposes. If the jQuery library is present when the application is initialized, AngularJS will use that instead of jqLite. If you use the AngularJS template cache, retrieved templates will already exist as if you had called the method on the template text. However, it's completely unnecessary and quite unwieldy to use compared to AngularJS templates.
When you declare a template and register it with AngularJS, it can be accessed through the injected , which acts as a key-value store for your templates. The recursive template is as follows: The and elements are present at each instance of a node, and they present the data at that node as well as an interface to the click event which we will de ne in a moment that will destroy it and all its children.
Following these, the conditional element renders only if the ag is set in the scope, and it repeats through the items array, recursing the child data and creating new instances of the directive. Here, you can see the full template de nition of the directive: 39 www. Instead, it would be better if you were able to create a directive that would seamlessly break apart the data recursively, and de ne and render the sub-HTML fragments cleanly.
By cleverly using directives and the service, this exact directive functionality is possible. The ideal directive in this scenario will be able to handle the recursive object without any additional parameters or outside assistance in parsing and rendering the object.
So, in the main view, your directive will look something like this: The directive is accepting an isolate scope binding to the parent scope object, which will remain structurally identical as the directive descends through the recursive object. The directive's template is subject to the function which necessarily uses the isolate scope , and the original wrapped HTML template maintains its relationship with the parent scope without the directive interfering.
See also f The Directive scope inheritance recipe goes over the basics that involve carrying the parent scope through a directive f The Directive templating recipe examines how a directive can apply external scope to an interpolated template f The Isolate scope recipe details how a directive can be decoupled from its parent scope Recursive directives The power of directives can also be effectively applied when consuming data in a more unwieldy format.
Consider the case in which you have a JavaScript object that exists in some sort of recursive tree structure. The view that you will generate for this object will also re ect its recursive nature and will have nested HTML elements that match the underlying data structure. Getting ready Suppose you had a recursive data object in your controller as follows: 37 www.
Furthermore, using transclusion means that the parent scope will continue to be in the directive to be used for the interpolated HTML. To see the main reason to use transclusion more clearly, modify the directive template slightly in order to see the results side by side. This can be done as follows: This will compile into the following: JSFiddle: 36 www. This simplicity becomes muddied when mixed with the complexity of directives and scope inheritance.
Directive transclusion is frequently used when the directive either needs to inherit from the parent scope, manage nested HTML, or both. How to do it… Assemble all the pieces required to use transclusion. This is shown here: 35 www. The parent scope is unchanged and obscured from inside the directive's function. See also f The Directive scope inheritance recipe goes over the basics that involve carrying the parent scope through a directive f The Directive templating recipe examines how a directive can apply an external scope to an interpolated template f The Directive transclusion recipe demonstrates how a directive handles the application of a scope to the interpolated existing nested content 34 www.
To prevent inheritance and to create a blank slate scope for the directive, isolate scope is utilized. Getting ready Suppose that you begin with the following skeleton application: How to do it… Assign an isolate scope to the directive with an empty object literal, as follows: 33 www.
The directive template is inserted to replace the tag and its contents, but the supplanting template HTML is still subject to the inherited scope. The function is able to modify the parent scope as though it were the directive's own. In other words, the link scope and the controller scope are the same object in this example.
See also f The Directive scope inheritance recipe goes over the basics that involve carrying the parent scope through a directive f The Isolate scope recipe gives details on how a directive can be decoupled from its parent scope f The Directive transclusion recipe demonstrates how a directive handles the application of a scope to the interpolated existing nested content 32 www. The directive has no template, and the HTML inside it is subject to the modi cations that the function makes to the scope.
As this does not use isolate scope and there is no transclusion, the parent scope is provided as the parameter, and the function writes to the parent scope's models. The HTML output tells us that the template was rendered from our markup, the function was the last to modify the scope, and the function overwrote the original values set up in the parent controller.
See also f The Directive templating recipe examines how a directive can apply an external scope to a transplated template f The Isolate scope recipe gives details on how a directive can be decoupled from its parent scope f The Directive transclusion recipe demonstrates how a directive handles the application of a scope to the interpolated existing nested content Directive templating Directives will frequently load HTML templates from outside their de nition.
When using them in an application, you will need to understand how to properly manage them, how they interact if at all with the directive's parent scope, and how they interact with the content nested inside them. Getting ready Suppose that you begin with the following skeleton application: 30 www. This allows the directive to manipulate the parent scope.
This can be done as follows: This will compile into the following: JSFiddle: 29 www. If not, the returned array will be a null value at the corresponding index. How it works… An AngularJS controller is merely a JavaScript constructor function, and when and are required, each directive returns their controller object. As you are using the controller object and not the controller scope, you must de ne your public controller methods on instead of.
Advanced recipes on authentication and authorization are taught and then routing and reporting recipes claim your attention. There is a final wrap-up with useful, interesting tips and tricks which you will really enjoy.
In short, this book will make you an expert in web2py in a trouble-free, quick, and easy manner. Approach This is a cookbook and you may read the chapters in any order. The recipes need not be read sequentially. There are a good amount of code examples and relevant screenshots to ease learning pains. If a directive is not instructed to provide a new scope for itself, it will inherit the parent scope. In the case that this is not desirable behavior, you will need to create an isolate scope for that directive, and inside that isolate scope, you can define a whitelist of parent scope elements that the directive will need.
To declare a directive with an isolate scope, simply pass an empty object literal as the scope property:. With this, there will be no inheritance from the parent scope in MainCtrl , and the directive will be unable to use methods or variables in the parent scope.
If you want to pass a read-only value to the directive, you will use inside the isolate scope declaration to indicate that a named attribute of the relevant HTML element contains a value that should be incorporated into the directive's isolate scope. This can be done as follows:. With this, the scope inside the directive now contains an innerval attribute with the value of outerval in the parent scope. AngularJS evaluates the expression string, and the result is provided to the directive's scope.
Setting the value of the variable does nothing to the parent scope or the attribute in the HTML; it is merely copied into the scope of the directive. While this approach is useful, it doesn't involve data binding, which you have come to love in AngularJS, and it isn't all that more convenient than passing in a static string value. What is far more likely to be useful to you is a true whitelist of the data binding from the parent scope.
Here, you are instructing the child directive scope to examine the parent controller scope, and bind the parent outerval attribute inside the child scope, aliased as the innerval attribute. Full data binding between scopes is supported, and all unnamed attributes and methods in the parent scope are ignored. Taking a step further, methods can also be pulled down from the parent scope for use in the directive. In the same way that a model variable can be bound to the child scope, you can alias methods that are defined in the parent scope to be invoked from the child scope but are still in the parent scope context.
Here, you are instructing the child directive to evaluate the expression passed to the myattr attribute within the context of the parent controller.
In this case, the expression will invoke the func method, but any valid AngularJS expression will also work. You can invoke it as you would invoke any other scope method, including parameters as required. Isolate scope is entirely managed within the scope attribute in the directive's returned definition object. If the directive is designed as a specific modifier for an aspect of your application, you might find that using isolate scope isn't necessary. On the other hand, if you're building a reusable, monolithic component that can be reused across multiple applications, it is unlikely that the directive will be using the parent scope in which it is used.
Hence, isolate scope will be significantly more useful. The Recursive directives recipe utilizes the isolate scope to maintain inheritance and separation in a recursive DOM tree. AngularJS provides a useful structure that allows you to build channels of communication between directive siblings within the same HTML element or parents in the same DOM ancestry without having to rely on AngularJS events. Inter-directive communication is accomplished with the require attribute, as follows:.
Using the stringified directive names passed through require , AngularJS will examine the current and parent HTML elements that match the directive names. The controller objects of these directives will be returned in an array as the ctrls parameter in the original directive's link function. The childDirective fetches the requested controllers and passes them to the link function, which can use them as regular JavaScript objects.
The order in which directives are defined is not important, but the controller objects will be returned in the order in which they are requested. The Optional nested directive controllers recipe demonstrates how to handle a scenario where parent or sibling controllers might not be present. The AngularJS construct that allows you to build channels of communication between directive siblings or parents in the same DOM ancestry also allows you to optionally require a directive controller of a sibling or parent.
Note that in index. This is shown in the following code:. If the controller exists, it will be served in the same fashion as the others. If not, the returned array will be a null value at the corresponding index.
An AngularJS controller is merely a JavaScript constructor function, and when parentDirective and siblingDirective are required, each directive returns their controller object. When a directive is not instructed to create its own isolate scope, it will inherit the scope of whatever scope it exists inside.
The most basic setup is to have the directive scope inherit from the parent scope that will be used by the directive within the link function. This allows the directive to manipulate the parent scope. There's nothing tricky going on here. The directive has no template, and the HTML inside it is subject to the modifications that the link function makes to the scope.
As this does not use isolate scope and there is no transclusion, the parent scope is provided as the scope parameter, and the link function writes to the parent scope's models. The HTML output tells us that the template was rendered from our index. The Directive templating recipe examines how a directive can apply an external scope to a transplated template.
The Isolate scope recipe gives details on how a directive can be decoupled from its parent scope. The Directive transclusion recipe demonstrates how a directive handles the application of a scope to the interpolated existing nested content.
Directives will frequently load HTML templates from outside their definition. When using them in an application, you will need to understand how to properly manage them, how they interact if at all with the directive's parent scope, and how they interact with the content nested inside them. This snippet will compile the directive element into the following:.
The parent scope from MainCtrl is inherited by the directive and is provided as the scope parameter inside the directive's link function. The link function is able to modify the parent scope as though it were the directive's own.
In other words, the link scope and the controller scope are the same object in this example. The Directive scope inheritance recipe goes over the basics that involve carrying the parent scope through a directive. Often, you will find that the inheritance of a directive's parent scope is undesirable somewhere in your application.
To prevent inheritance and to create a blank slate scope for the directive, isolate scope is utilized. Assign an isolate scope to the directive with an empty object literal, as follows:.
The directive creates its own scope and performs the modifications on the scope instead of performing them inside the link function. The parent scope is unchanged and obscured from inside the directive's link function. The Directive templating recipe examines how a directive can apply an external scope to an interpolated template. Transclusion on its own is a relatively simple construct in AngularJS.
This simplicity becomes muddied when mixed with the complexity of directives and scope inheritance. Directive transclusion is frequently used when the directive either needs to inherit from the parent scope, manage nested HTML, or both. This will compile into the following:. Furthermore, using transclusion means that the parent scope will continue to be in the directive to be used for the interpolated HTML. To see the main reason to use transclusion more clearly, modify the my-directive.
It should now be apparent exactly what is going on inside the directive that uses transclusion. The directive's template is subject to the link function which necessarily uses the isolate scope , and the original wrapped HTML template maintains its relationship with the parent scope without the directive interfering.
The Directive templating recipe examines how a directive can apply external scope to an interpolated template. The Isolate scope recipe details how a directive can be decoupled from its parent scope.
The power of directives can also be effectively applied when consuming data in a more unwieldy format. Consider the case in which you have a JavaScript object that exists in some sort of recursive tree structure. The view that you will generate for this object will also reflect its recursive nature and will have nested HTML elements that match the underlying data structure. As you might imagine, iteratively constructing a view or only partially using directives to accomplish this will become extremely messy very quickly.
Instead, it would be better if you were able to create a directive that would seamlessly break apart the data recursively, and define and render the sub-HTML fragments cleanly. The ideal directive in this scenario will be able to handle the recursive object without any additional parameters or outside assistance in parsing and rendering the object.
So, in the main view, your directive will look something like this:. The reason for this is that each level of the directive can instantiate directives inside it and convert them from an uncompiled template to real DOM material. The angular. It accepts a string template or DOM fragment and returns a jqLite object that can be modified, inserted, or compiled for your purposes.
0コメント