Require of AngularJs Directive directive

The use of controller is divided into two situations, one is require custom controller, because the property method in custom controller is written by oneself, it is simpler to be used, and the other method is require ANGULARJS built-in instruction , most of the time it takes require to ngmodel this instruction.

When customizing the angular directive, there is a field called require, which is used to communicate with each other between instructions. As a simple example, if we need to write two instructions now, there are many coincident methods in the linking function, in order to avoid repeating ourselves (the famous dry principle), we can write this repeating method in the controller of the third instruction, It then require the command with the Controller field in the other two required instructions, and the coincident method can be referenced by the fourth parameter of the linking function. The structure of the code is roughly as follows:

Java code

2. var app = Angular.modeule (' MyApp ', []);
6. App.directive (' common ', function () {
8. return {
10. ...
12. Controller:function ($scope) {
14. this.method1 = function () {
16. };
18. this.method2 = function () {
20. };
22. },
24. ...
26. }
28. });
32. App.directive (' D1 ', function () {
34. return {
36. ...
38. Require: '? ^common ',
40. Link:function (Scope,elem,attrs,common) {
42. Scope.method1 = common.method1;
44. ..
46. },
48. ...
50. }
52. });

Of course, the above example is only one of the controller usages in the instruction. Although generally speaking, the opportunity to use the Controller field is not many, but to write good angularjs instructions, this is a point that must be mastered.

Referencing built-in directives

Java code

2. Angular.module (' myApp ')
4. . directive (' Spoint ', function () {
6. return {
8. Require: ' Ngmodel ',
10. Link:function (Scope, Elm, Attrs, ctrl) {
12. var Fibonacci = [1, 2, 3, 5, 8,, +, 80];
14. Ctrl. $parsers. Unshift (function (viewvalue) {
16. if (Fibonacci.indexof (parseint (viewvalue)) >= 0) {
18. Ctrl. $setValidity (' Fibonacci ', true);
20. return viewvalue;
22. } Else {
24. Ctrl. $setValidity (' Fibonacci ', false);
26. return undefined;
28. }
30. });
32. }
34. };
36. });

Note Here is the fourth parameter of the directive link method, we define the Ngmodel in require so here it is a Ngmodelcontroller

Ngmodelcontroller is used to provide a set of APIs for Ng-model. Through him we can him to determine whether the value of the Ngmodel is legal. We'll cover only a few of the methods and properties that are related to form validation.

In the above example, we used the $parsers attribute and the $setvalidity () method. A set of function is saved in the $parsers, which is called once when the data in the DOM changes. This gives us the opportunity to check the value of the new input when the user modifies the value in the DOM.

"Smart floating point (smart-float)" directive. It can convert "1.2" or "all" to a valid floating-point number "1.2". Note that we cannot use the "digital input type" here, because HTML5 's browser does not allow users to enter illegal values such as "."

Html

Java code

1. <input type="text" ng-model="Length" name="Length" smart-float/>
2. {{length}}<br/>
3. <span ng-show="form.length. $error. Float" >this is not a valid float number!</span>

Js

Java code

2. var float_regexp =/^\-?\d+ ((\.| \,) \d+)? $/;
4. App.directive (' smartfloat ', function () {
6. return {
8. Require: ' Ngmodel ',
10. Link:function (Scope, Elm, Attrs, ctrl) {
12. Ctrl. $parsers. Unshift (function (viewvalue) {
14. if (float_regexp.test (Viewvalue)) {
16. Ctrl. $setValidity (' float ', true);
18. return parsefloat (Viewvalue.replace (', ', ' . '));
20. } Else {
22. Ctrl. $setValidity (' float ', false);
24. return undefined;
26. }
28. });
30. }
32. };
34. });

Require of AngularJs Directive directive