Angularjs Creating a new directive

Directive (directives) is the most important part of all ANGULARJS applications. Although Angularjs has provided a very rich set of instructions, it is often necessary to create application-specific instructions.

Angularjs the original instructions

Ng-init Initialization Instructions

Ng-if condition designation

Ng-repeat Cycle Instructions

Here is a description of how to create a new directive

Add HTML code

<DivNg-app= "MyApp"><Hello-world></Hello-world><DivHello-world></Div><DivData-hello-world></Div><DivX-hello-world></Div></Div>

Add the JS code before rendering the Ng-app. If the ANGULARJS is not dynamically loaded, write the JS code in front of the HTML code. If dynamic loading Angularjs is added in front of Angular.bootstrap (document.body,["MyApp").

function () {        return  {            "AE",            true,            "<div> Helloworld</div> "        };    });

In the above code, the App.directive () method registers a new directive in the module. The first parameter of this method is the name of the instruction. The second parameter is a function that returns a directive definition object. If your instructions depend on other objects or services, such as $rootScope, $http, or $compile, they can be injected at this time. This instruction is used in HTML as an element, as follows:

You can also add data-or X in front of the element, both of which are HTML5 standard

<div x-hello-world></div> or <div data-hello-world></div>

These four kinds of writing can be rendered normally.

When the Angularjs matches the instruction, it converts the string into a hump (CamelCase) representation and then matches the registered instruction.

This is why we use the HelloWorld directive in HTML in a Hello-world way.

We used three properties to configure instructions during the instruction definition process.

restrict– This property is used to specify how the instruction is used in HTML (remember the four representations of the instructions previously stated). In the example above, we used the ' AE '. So this instruction can be used as a new HTML element or as a property. If you want to allow the instruction to be used as a class, we set the restrict to ' AEC ', that is, if you use just the

function () {        return  {            "AEC",            true,            "<div>helloworld </div> "        };    });

The <div class= "Hello-world" ></div> can also be rendered normally.

Replace– This property indicates whether the generated HTML content will replace the HTML element that defines the directive. In our example, we use our instructions in

template– This attribute specifies the HTML markup generated after the instruction is angular compiled and linked. This property value is not necessarily a simple string. The template can be very complex and often contains other directives, as well as expressions ({{}}). In more cases you may see templateurl, not template. So ideally, you should put the template in a specific HTML file, and then point the Templateurl property to it.

Angularjs Creating a new directive