| Start | ||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Creating and consuming custom directives Directives are one of the most powerful features of angularjs. Custom angularjs directives are used to extend functionality of html by creating new html elements or custom attributes to provide certain behavior to an html tag. directive.js This directive can then be used in App as : |
||||||||||||||||||||||||||||||||||||||
Directive Definition Object Template
|
||||||||||||||||||||||||||||||||||||||
| How to create resuable component using directive AngularJS directives are what controls the rendering of the HTML inside an AngularJS application. They can be an Html element, attribute, class or a comment. Directives are used to manipulate the DOM, attaching new behavior to HTML elements, data binding and many more. Some of examples of directives which angular provides are ng-model, ng-hide, ng-if. Similarly one can create his own custom directive and make them resuable. For creating Custom directives Reference (opens new window). The sense behind creating reusable directives is to make a set of directives/components written by you just like angularjs provides us using angular.js . These reusable directives can be particularly very helpful when you have suite of applications/application which requires a consistent behavior, look and feel. An example of such reusable component can be a simple toolbar which you may want to use across your application or different applications but you want them to behave the same or look the same. Firstly , Make a folder named resuableComponents in your app Folder and make reusableModuleApp.js reusableModuleApp.js: mainApp.js: index.html: Directive are reusable components by default. When you make directives in separate angular module, It actually makes it exportable and reusable across different angularJs applications. New directives can simply be added inside reusableModuleApp.js and reusableModuleApp can have it's own controller, services, DDO object inside directive to define the behavior. |
||||||||||||||||||||||||||||||||||||||
| Basic Directive example superman-directive.js superman-template.html index.html You can check out more about directive's |
||||||||||||||||||||||||||||||||||||||
| Basic directive with template and an isolated scope Creating a custom directive with isolated scope will separate the scope inside the directive from the outside scope, in order to prevent our directive from accidentally change the data in the parent scope and restricting it from reading private data from the parent scope. To create an isolated scope and still allow our custom directive to communicate with the outside scope, we can use the The actual bindings are made with extra attributes attached to the directive. The binding settings are defined with the
Simple example of a directive with an isolated scope: Example how to use this directive and bind data from the controller's scope to the directive's inner scope: Controller: View: |
||||||||||||||||||||||||||||||||||||||
| Building a reusable component Directives can be used to build reusable components. Here is an example of a "user box" component: userBox.js Controller.js myPage.js user-box.html The result will be: |
||||||||||||||||||||||||||||||||||||||
| Directive decorator Sometimes you may need additional features from a directive. Instead of rewriting (copy) the directive, you can modify how the directive behaves. The decorator will be executed during $inject phase. To do so, provde a .config to your module. The directive is called myDirective, so you have to config myDirectiveDirective. (this in an angular convention [read about providers] ). This example will change the templateUrl of the directive: This example add an onClick event to the directive element when clicked, this happens during compile phase. Similar approach can be used for both Providers and Services. |
||||||||||||||||||||||||||||||||||||||
| Directive inheritance and interoperability Angular js directives can be nested or be made interoperable. In this example, directive Adir exposes to directive Bdir it's controller $scope, since Bdir requires Adir. Make sure to set require: '^Adir' (look at the angular documentation, some versions doesn't require ^ character). You can nest your directive in this way: Is not required that directives are nested in your HTML. Parameters
|
Read Article
https://develop.horje.com/learn/1434/reference