Web.Designer.Advanced.Angular-P2P

REUSEABLE DIRECTIVE FOR INCREMENTING
OR DECREMENTING NUMBERS
This directive will use two-way data binding to take
care of updating a parent model from any $scope,
through the use of isolate scope. Encapsulating logic
enables us to reuse it, and isolating $scope enables us to
use the same directive in many different places.
1. Custom elements
Before we begin, let’s create a custom element named
‘number-picker’, which will have an attribute called ‘value’
(this can be named something different). The ‘expression’
is just a placeholder for a model value we’re passing later.
2. Directive declaration and HTML
Next we’ll create a basic directive definition, and add a
template property. Directives can use templates from a
string or from an external file using templateUrl (pointing
to a relative URL). Let’s set up the base directive
properties and add our HTML template in.
angular
.module('app', [])
.directive('numberPicker', function
numberPicker() {
function numberPickerCtrl() {
}
return {
restrict: 'E',
scope: {},
template: [
'',
'-',
'',
'+',
''
].join(''),
controllerAs: 'vm',
controller: numberPickerCtrl
};
});
3. Isolate scope binding
We need to pass the updated value in the directive back
to where it was initialised after changes have taken place,
this lets us keep other data models in the parent
Controller updated. Pass the value in via the scope
property, creating a new object to initiate ‘isolate scope’,
and creating a property name called ‘value’. We can use
= as the value, which tells Angular to bind the value two
ways, back up the parent Controller.
.directive('numberPicker', function
numberPicker() {
...
return {
...
scope: {
value: '='
},
...
};
});
4. Controller methods
We need to implement methods to increase or decrease
our number inside the Controller. As we’re using the
controllerAs syntax, we need to attach these to the
function instance using the ‘this’ keyword rather than
injecting $scope.
angular
.module('app', [])
.directive('numberPicker', function
numberPicker() {
function numberPickerCtrl($scope) {
this.increment = function () {
};
this.decrement = function () {
};
}
...
});
});
5. Model manipulation
As our value is passed through $scope, we access it
using $scope.value to pass back up to the parent model
and not with this.value.
angular
.module('app', [])
.directive('numberPicker', function
numberPicker() {
function numberPickerCtrl($scope) {
this.increment = function () {
++$scope.value;
};
this.decrement = function () {
--$scope.value;
};
}
...
});