The ANGULARJS framework can reduce development complexity with service and directive. This feature is ideal for separating code, creating testable components, and then turning them into reusable components.
Directive is a set of standalone JavaScript, HTML, and CSS that encapsulates a specific behavior that will become part of the Web components that are created in the future and can be reused in a variety of applications. Once created, we can execute a directive directly through an HTML tag, custom attribute or CSS class, or even an HTML annotation.
This tutorial will describe how to create a ' custom step selection ' directive, which can be used as a reusable input component. This article will not only introduce the general creation process of Directive, but also describe the validation methods for input controls and how to seamlessly integrate any form using Ngmodelcontroller to take advantage of the existing power of Angularjs forms.
Directly on the code:
Html:
<!--lang:html-->
<body ng-app= "demo" ng-controller= "Democontroller" >
<form name= "Form" >
Model Value: <input type= "Text" size= "3" ng-model= "rating" ><br>
Min value: <input type= "Text" size= "3" ng-model= "minrating" ><br>
Max value: <input type= "Text" size= "3" ng-model= "maxrating" ><br>
form has been modified: {form. $dirty}}<br>
form is valid: {form . $valid}}
Js:
<!--lang:js-->
angular.module (' demo ', [
' Revolunet.stepper '
])
. Controller (' Democontroller ', function ($scope) {
$scope. rating =;
$scope. minrating =;
$scope. maxrating =;
});
The simplest structure of rn-stepper
<!--lang:js-->
//We declare a module name for my Projet, and its dependencies (none)
angular.module (' re Volunet.stepper ', [])
//Declare our naïve directive
. Directive (' Rnstepper ', function () {return
{
// Can is used as attribute or element
restrict: ' AE ',
//Which markup this directive generates template
: ' <bu Tton>-</button> ' +
' <div>0</div> ' + '
<button>+</button> '
}
;
Now directive Rnstepper has had a simple prototype.
There are two ways to try this:
<div rn-stepper> </div>
<rn-stepper> </rn-stepper>
demo:http://jsfiddle.net/revolunet/n4jhg/
Add an internal action
Directly on the code:
<!--lang:js-->
. Directive (' Rnstepper ', function () {return
{
restrict: ' AE ',
//Declare the Directive scope as private (and empty)
scope: {},
//Add behaviour to We buttons and use a variable value
tem PLATE:
' <button ng-click= ' decrement () >-</button> ' +
' <div>{{value}}</div> ' +
' <button ng-click= ' increment () ' >+</button> ',
//This function was called on each rn-stepper Instance initialisation
//We just declare what we need in the above template
(scope, link:function, IA Ttrs) {
scope.value = 0;
Scope.increment = function () {
scope.value++;
};
Scope.decrement = function () {scope.value--;;}};
});
In template, we added the Click event Response to the two button and implemented the response method in the link method.
Scope here is a private scope whose scope is limited to rnstepper this directive.
demo:http://jsfiddle.net/revolunet/a92aw/
Interaction with the external world (external scope)
Until the above, our rnstepper are playing with themselves, and not with the external scope of some interaction.
Below we will add a data binding to enable Rnstepper to connect with the outside world.
Directly on the code:
<!--lang:js-->
scope: {
value: ' =ngmodel '
}
We have added a set of key-value pairs in scope so that the relationship between the internal variable value and the external attribute Ngmodel is automatically established.
The = represented here means two-way binding (double data-binding).
What do you mean by two-way binding?
That is, when value changes, Ngmodel also changes, and vice versa.
In our demo, look at the following line of code:
<!--Lang:js-->
<div rn-stepper ng-model= "rating" ></div>
This means that the internal variable value of Directive Rnstepper establishes bidirectional data binding with rating in the external scope.
demo:http://jsfiddle.net/revolunet/9e7hy/
Make our components more friendly
Directly on the code:
<!--lang:js-->. Directive (' Rnstepper ', function () {return {//restrict and template attributes the S
Ame as before. We don ' t need anymore to bind the value to the external Ngmodel/as we require its controller and thus can access
It directly scope: {},//The ' require ' property says we need a Ngmodel attribute in the declaration. This require makes a 4th argument available the link function below require: ' Ngmodel ',//The Ngmodelcontro
Ller an instance of a Ngmodelcontroller//for our country current Ngmodel. If we had required multiple directives the Require attribute, this 4th//argument would give us an array of con
Trollers.
Link:function (Scope, ielement, Iattrs, Ngmodelcontroller) {//We can now use our Ngmodelcontroller builtin, methods
That does the heavy-lifting for us/While model change, update our view (just update the div content) Ngmodelcontroller. $render =function () {ielement.find (' div '). Text (Ngmodelcontroller. $viewValue);
}; Update the model then the View function Updatemodel (offset) {//Call $parsers pipeline then update $mode
LValue Ngmodelcontroller. $setViewValue (ngmodelcontroller. $viewValue + offset);
Update the local view Ngmodelcontroller. $render ();
}//Update the value when user clicks the buttons scope.decrement = function () {Updatemodel (-1);
};
Scope.increment = function () {Updatemodel (+1);
};
}
};
});
Here, I don't need the internal variable value anymore. Because we've got the Ngmodelcontroller reference in the link method, here's Ngmodelcontroller. $viewValue is actually the value in the previous example.
But we added another set of key values to require: ' Ngmodel '.
We have used two new APIs:
Ngmodelcontroller. $render: When Ngmodel changes, the framework automatically invokes, synchronizing $modelvalue and $viewvalue, that is, refreshing the page.
Ngmodelcontroller. $setViewValue: When $viewvalue changes, the $modelvalue is updated synchronously by this method.
demo:http://jsfiddle.net/revolunet/s4gm6/
Thank you for reading, I hope to help you, thank you for your support for this site!
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
