How to access arguments in a directive? - angularjs

I've defined a directive like so:
angular.module('MyModule', [])
.directive('datePicker', function($filter) {
return {
require: 'ngModel',
link: function(scope, elem, attrs, ctrl) {
ctrl.$formatters.unshift(function(modelValue) {
console.log('formatting',modelValue,scope,elem,attrs,ctrl);
return $filter('date')(modelValue, 'MM/dd/yyyy');
});
ctrl.$parsers.unshift(function(viewValue) {
console.log('parsing',viewValue);
var date = new Date(viewValue);
return isNaN(date) ? '' : date;
});
}
}
});
Which I apply to an element like so:
<input type="text" date-picker="MM/dd/yyyy" ng-model="clientForm.birthDate" />
My directive gets triggered whenever I add the date-picker attribute to an element, but I want to know how to access the attribute's value (MM/dd/yyyy) inside my directive JS so that I can remove that constant beside $filter. I'm not sure if any of the variables I have access to provide this.

Just pull it directly from the attrs:
return $filter('date')(modelValue, attrs.datePicker);
BTW, if the only filter you're using is date, then you can inject that directly:
.directive('datePicker', function (dateFilter) {
// Keep all your code, just update this line:
return dateFilter(modelValue, attrs.datePicker || 'MM/dd/yyyy');
// etc.
}

You can access it from attrs argument of link function.
Demo: http://plnkr.co/edit/DBs4jX9alyCZXt3LaLnF?p=preview
angModule.directive('moDateInput', function ($window) {
return {
require:'^ngModel',
restrict:'A',
link:function (scope, elm, attrs, ctrl) {
var moment = $window.moment;
var dateFormat = attrs.moMediumDate;
attrs.$observe('moDateInput', function (newValue) {
if (dateFormat == newValue || !ctrl.$modelValue) return;
dateFormat = newValue;
ctrl.$modelValue = new Date(ctrl.$setViewValue);
});
ctrl.$formatters.unshift(function (modelValue) {
scope = scope;
if (!dateFormat || !modelValue) return "";
var retVal = moment(modelValue).format(dateFormat);
return retVal;
});
ctrl.$parsers.unshift(function (viewValue) {
scope = scope;
var date = moment(viewValue, dateFormat);
return (date && date.isValid() && date.year() > 1950 ) ? date.toDate() : "";
});
}
};
});

Related

AngularJS custom validation directive with dynamic blacklist

I am using the example for ngMessages from this post:
How to add custom validation to an AngularJS form?
It works OK as long as the blacklist is a static list of items.
I would like to dynamically generate the blacklist but the directive seems to render before the blacklist is populated.
This is the directive:
.directive('blacklist', function () {
return {
require: 'ngModel',
link: function (scope, elem, attr, ngModel) {
var blacklist = attr.blacklist.split(',');
ngModel.$parsers.unshift(function (value) {
ngModel.$setValidity('blacklist', blacklist.indexOf(value) === -1);
return value;
});
}
};
});
This is the input where the directive is used:
<input type="text" id="DocumentName" name="DocumentName" class="form-control"
ng-model="$ctrl.document.DocumentName" ng-required="true"
blacklist="{{$ctrl.DocumentNames}}" />
In the controller when the blacklist is specified with static values it works as expected.
.component('documentDetail', {
templateUrl: '/app/document-detail/document-detail.template.html',
controller: ['Document',
function DocumentDetailController(Document) {
var self = this;
self.DocumentNames = "Install Direct Bill Invoice,Order Preacknowledgement,Order Acknowledgement"; });
When this is changed to get the DocumentNames with a service call it seems like the directive is rendered before the blacklist values are populated.
component('documentDetail', {
templateUrl: '/app/document-detail/document-detail.template.html',
controller: ['Document',
function DocumentDetailController(Document) {
var self = this;
var documentProfiles = Document.query();
documentProfiles.$promise.then(function () {
var bl = [];
for (var i = 0; i < documentProfiles.length; i++) {
bl.push(documentProfiles[i].DocumentName);
}
self.DocumentNames = bl.join(',');
});
When I inspect the element I can see the data has been populated:
But the validation acts like it is an empty string:
I tried wrapping it in a $timeout but the result was the same.
component('documentDetail', {
templateUrl: '/app/document-detail/document-detail.template.html',
controller: ['Document', '$timeout',
function DocumentDetailController(Document, $timeout) {
var self = this;
var documentProfiles = Document.query();
$timeout(function () {
documentProfiles.$promise.then(function () {
var bl = [];
for (var i = 0; i < documentProfiles.length; i++) {
bl.push(documentProfiles[i].DocumentName);
}
self.DocumentNames = bl.join(',');
});
});
How can I get these values to populate before the directive or input renders so that the blacklist can be dynamic? Thanks in advance for your help.
Use attr.$observe:
app.directive('blacklist', function () {
return {
require: 'ngModel',
link: function (scope, elem, attrs, ngModel) {
var blacklist = attrs.blacklist.split(',');
attr.$observe("blacklist",function(newValue) {
blacklist = newValue.split(',');
});
ngModel.$parsers.unshift(function (value) {
ngModel.$setValidity('blacklist', blacklist.indexOf(value) === -1);
return value;
});
}
};
});
The observer function is invoked whenever the interpolated value changes.
For more information, see AngularJS attr.$observe API Reference
Update
Using the $validators API1
The accepted answer to the referenced question uses the $parsers and $formatters pipelines to add a custom synchronous validator. AngularJS 1.3+ added a $validators API so there is no need to put validators in the $parsers and $formatters pipelines:
app.directive('blacklist', function (){
return {
require: 'ngModel',
link: function(scope, elem, attrs, ngModel) {
ngModel.$validators.blacklist = function(modelValue, viewValue) {
var blacklist = attrs.blacklist.split(',');
var value = modelValue || viewValue;
var valid = blacklist.indexOf(value) === -1;
return valid;
});
}
};
});
Notice that since the blacklist is re-computed everytime the ngModelController does a validation, there is no need to add an $observe function.
For more information, see AngularJS ngModelController API Reference - $validators.

How to access ng-model from attribute directive?

I'm trying to write a custom directive to validate input value: does it belong to the specified range. The problem is that I can't access ng-model without knowing the name of the scope variable which is used for ng-model. Considering that directive has to be reused with different inputs I want to access ng-model directly. I did try to use scope[attrs.ngModel] but got the undefined value. How can read ng-model value inside directive? Thank you.
netupApp.directive('between', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
scope.$watch('dataSubmitting', function(dataSubmitting){
if (dataSubmitting) {
var min = Number(attrs.min);
var max = Number(attrs.max);
console.log(attrs.ngModel); // "number"
console.log(scope[attrs.ngModel]); // undefined
var inputText = scope.number; // that is the var used in ng-model
console.log(min); // 10
console.log(inputText); // would be the input value
console.log(max); //20
if (inputText <= min || inputText >= max) {
scope.alerts.push({
msg: 'error',
type: 'danger',
icon: 'warning',
'closable': true
});
}
}
});
}
};
});
You should hook into the Angular validation system and add your validator function to either the $validators or $asyncValidators collections (in your case I think $validators is enough, no need for async).
The validator functions receive the model value as an argument :
link: function(scope, elm, attrs, ctrl) {
var min = Number(attrs.min);
var max = Number(attrs.max);
ctrl.$validators.between = function(modelValue, viewValue) {
if (modelValue <= min || modelValue >= max) {
//do something here or just return false
return false;
}
return true;
}
}
In the view you can get the validation error messages like this :
<div ng-messages="formName.inputName.$error">
<p ng-message="between">The value is not in the required range<p>
</div>
Reference doc : https://docs.angularjs.org/api/ng/type/ngModel.NgModelController
The proper way to get the ngModel.$viewValue is:
app.directive('between', function () {
return {
require: 'ngModel',
link: function (scope, element, attrs, ngModel) {
ngModel.$render = function () {
var newValue = ngModel.$viewValue;
console.log(newValue)
};
}
};
});
Have a look at tutorial underneath when wanting to invoke the ngModel.$setViewVAlue from the directive
https://egghead.io/lessons/angularjs-using-ngmodel-in-custom-directives
According to angluarJs doc:$parse
you need to parse the attrs, please try:
var getter=$parse(attrs.ngModel);
var setter=getter.assign;
setter(scope,getter(scope));

Angular 1.2 Broadcasting changes in validation across directives

How do I use $broadcast to update custom validation in other directives which already have isolated scope?
I want to be able create separate validation rules used on a single input field.So in the future I can change the validation of a field by simply changing the directive reference.
Check the plunkr
edit: I am using angular 1.2.8
The element the directive is on has isolated scope.
Validation Directive 1
(function () {
'use strict';
angular
.module('app')
.directive('dateOneValidation', dateOneValidation);
function dateOneValidation() {
var directive = {
require: 'ngModel', // note: this has to stay
restrict: 'A',
link: link
};
return directive;
function link(scope, element, attrs, ctrl) {
scope.$on('updateDateOneValidation', function(e, date){
ctrl.$parsers.unshift(function (viewValue) {
var form = scope.form;
var dateOne = moment(form.dateOne.$viewValue, "DD/MM/YYYY", true);
var today = moment();
var dateOneBeforeOrOnToday = dateOne.isSame(today, 'day') || dateOne.isBefore(today, 'day');
dateOneBeforeOrOnToday ? form.dateOne.$setValidity('dateOneBeforeOrOnToday', true):
form.dateOne.$setValidity('dateOneBeforeOrOnToday', false);
return viewValue
});
});
}
}
})();
Validation Directive 2
(function () {
'use strict';
angular
.module('app')
.directive('dateTwoValidation', dateTwoValidation);
function dateTwoValidation() {
var directive = {
require: 'ngModel', // note: this has to stay
restrict: 'A',
link: link
};
return directive;
function link(scope, element, attrs, ctrl) {
scope.$on('updateDateTwoValidation', function(e, date){
ctrl.$parsers.unshift(function (viewValue) {
var form = scope.form;
var dateOne = moment(form.dateOne.$viewValue, "DD/MM/YYYY", true);
var dateTwo = moment(viewValue, "DD/MM/YYYY", true);
var dateTwoAfterDateOne = dateTwo.isSame(dateOne, 'day') || dateTwo.isAfter(dateOne, 'day');
dateTwoAfterDateOne ? form.dateTwo.$setValidity('dateTwoAfterDateOne', true):
form.dateTwo.$setValidity('dateTwoAfterDateOne', false);
return viewValue
});
});
}
}
})();
(function () {
'use strict';
angular
.module('app')
.directive('stepOne', stepOne);
function stepOne() {
parentController.$inject = ['$scope'];
function parentController($scope) {
var vm = this;
vm.dateOne = '01/01/2000'
vm.dateTwo = '01/01/1900'
vm.validateStepOne = validateStepOne;
function validateStepOne() {
$scope.$broadcast('updateDateOneValidation');
$scope.$broadcast('updateDateTwoValidation');
}
}
var directive = {
restrict: 'EA',
require: '^form',
templateUrl: 'src/app/form/step1.html',
scope: {
},
controller: parentController,
controllerAs: 'vm'
};
return directive;
}
})();
(function () {
'use strict';
angular
.module('app')
.directive('dateOneValidation', dateOneValidation);
function dateOneValidation() {
var directive = {
require: 'ngModel', // note: this has to stay
restrict: 'A',
link: link
};
return directive;
function link(scope, element, attrs, ctrl) {
var form = scope.form;
var today = moment();
scope.$watch(attrs.ngModel, function () {
validator()
});
scope.$on('updateDateOneValidation', function () {
validator();
});
function validator() {
var dateOne = moment(form.dateOne.$viewValue, "DD/MM/YYYY", true);
var dateOneBeforeOrOnToday = dateOne.isSame(today, 'day') || dateOne.isBefore(today, 'day');
dateOneBeforeOrOnToday ? form.dateOne.$setValidity('dateOneBeforeOrOnToday', true) :
form.dateOne.$setValidity('dateOneBeforeOrOnToday', false);
}
}
}
})();
(function () {
'use strict';
angular
.module('app')
.directive('dateTwoValidation', dateTwoValidation);
function dateTwoValidation() {
var directive = {
require: 'ngModel', // note: this has to stay
restrict: 'A',
link: link
};
return directive;
function link(scope, element, attrs, ctrl) {
var form = scope.form;
scope.$watch(attrs.ngModel, function () {
validator();
});
scope.$on('updateDateTwoValidation', function (e, date) {
validator();
});
function validator() {
var dateOne = moment(form.dateOne.$viewValue, "DD/MM/YYYY", true);
var dateTwo = moment(form.dateTwo.$viewValue, "DD/MM/YYYY", true);
var dateTwoAfterDateOne = dateTwo.isSame(dateOne, 'day') || dateTwo.isAfter(dateOne, 'day');
dateTwoAfterDateOne ? form.dateTwo.$setValidity('dateTwoAfterDateOne', true) :
form.dateTwo.$setValidity('dateTwoAfterDateOne', false);
};
};
}
})()
Alternatively You can use a higher shared scope with a form object and pass it to your directives. Something like the following:
topLevelScope - ngForm
directive1(topLevelScope.ngForm)
topLevelScope.ngForm.$setValidity('input1', true)
directive2(topLevelScope.ngForm)
topLevelScope.ngForm.$setValidity('input2', true)
directive3(topLevelScope.ngForm)
topLevelScope.ngForm.$setValidity('input3', true)
My 2 cents.

AngularJS directive calls multiple time rather than to call a single time

I have created a directive for textarea which allows to edit data manipulation. In a form there are multiple textarea which as same directive. And when I trigger any event it traverse all elements which has assign directive.
Eg.There are 10 textarea fields and having directive "HzAutosave". Then when I trigger click on particular textarea it returns particular textarea's value, but it triggers socket io event to send data to server 10 times, whether there is only changes in a single field.
Directive
.directive("hzAutoSaveTextarea", ['$timeout', '$interval', 'HzSocket', function ($timeout, $interval, HzSocket) {
var currentElement = null;
return {
restrict: "E",
replace: true,
require: "ngModel",
scope: {},
template: "<textarea></textarea>",
compile: function (scope, element) {
return {
pre: function (scope, element, attrs) {
element.on("click", function (e) {
e.preventDefault();
currentElement = attrs.id;
console.log("focused element:" + currentElement);
angular.element(".autosave").removeClass("active-element");
element.addClass("active-element");
});
},
post: function (scope, element, attrs) {
var currentVal = null, previousVal = null;
$interval(function () {
currentVal = angular.element(".active-element").val();
if (null !== currentVal && undefined !== currentVal && "" !== currentVal) {
console.log("value::" + angular.element(".active-element").val());
if (previousVal !== currentVal) {
console.log("save data to console");
previousVal = currentVal;
var socket = io();
var data = {module: "photo", element: currentElement, value: currentVal};
HzSocket.emit('autosave', data);
}
}
}, 3000);
}
}
},
link: function (scope, element, attrs, ngModel) {
}
}
}]);
HTML
<hz-auto-save-textarea ng-model="asContainer" placeholder="Description" id="{{result.photo_id}}" class="album_commentarea margin_top5 autosave"></hz-auto-save-textarea>
I don't know how to prevent triggering multiple time socket request and other qualified events of JavaScript.
Move the autosave logic to the directive factory function which is executed only once:
.directive("hzAutoSaveTextarea", ['$timeout', '$interval', 'HzSocket', function ($timeout, $interval, HzSocket) {
var currentElement = null;
var currentVal = null, previousVal = null;
$interval(function () {
currentVal = angular.element(".active-element").val();
if (null !== currentVal && undefined !== currentVal && "" !== currentVal) {
console.log("value::" + angular.element(".active-element").val());
if (previousVal !== currentVal) {
console.log("save data to console");
previousVal = currentVal;
var socket = io();
var data = {module: "photo", element: currentElement, value: currentVal};
HzSocket.emit('autosave', data);
}
}
}, 3000);
return {
restrict: "E",
replace: true,
require: "ngModel",
scope: {},
template: "<textarea></textarea>",
compile: function (scope, element) {
return {
pre: function (scope, element, attrs) {
element.on("click", function (e) {
e.preventDefault();
currentElement = attrs.id;
console.log("focused element:" + currentElement);
angular.element(".autosave").removeClass("active-element");
element.addClass("active-element");
});
},
post: function (scope, element, attrs) {
}
}
}
}
}]);
This way only one $interval will be setup which is what you need.
One interval is created for each directive, therefore you get those 10 events. I'd suggest moving the interval to a common service.

how to display object in json formate in angular js?

I am trying to display value of all my fields in a json object .I am able to add firstname ,email , password in an object.but my confirm password not displaying in object why ? I enter same password with confirm password still not display
here is my code
http://plnkr.co/edit/iHA8iQC1HM5OzZyIg4p3?p=preview
angular.module('app', ['ionic','ngMessages']).directive('compareTo',function(){
return {
require: "ngModel",
scope: {
otherModelValue: "=compareTo"
},
link: function(scope, element, attributes, ngModel) {
ngModel.$validators.compareTo = function(modelValue) {
// alert(modelValue == scope.otherModelValue)
return modelValue == scope.otherModelValue;
};
scope.$watch("otherModelValue", function() {
ngModel.$validate();
});
}
};
why confirm password not display ?
}).controller('first',function($scope){
})
Your compareTo directive fails and it will not bind to a model if the validator is failing. If you remove your compareTo directive from the code you will get the confiredpassword in your scope.
Refer to this: password-check directive in angularjs to fix your comparTo directive.
Also here is a plunker of the fixed directive:
http://plnkr.co/edit/wM3r6eR2jhQS7cjvreLo?p=preview
.directive('compareTo', function() {
return {
scope: {
targetModel: '=compareTo'
},
require: 'ngModel',
link: function postLink(scope, element, attrs, ctrl) {
var compare = function() {
var e1 = element.val();
var e2 = scope.targetModel;
if (e2 !== null) {
return e1 === e2;
}
return false;
};
scope.$watch(compare, function(newValue) {
ctrl.$setValidity('errorCompareTo', newValue);
});
}
};

Resources