We Keep Coding

How to set watcher for input.$error object with directive in AngularJS

I have a form that contain date inputs and select elements,
I tried to use ngChange but I found it not very useful when handling dates errors.
So I'm trying to set a watcher in a directive for every input.$error in order to display error message to the user.
my directive:
module.directive('validator', [function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elem, attr, ctrl) {
scope.input = ctrl;
scope.$watch('input.$error', function() {
console.log(scope.input);
}, true);
}
}
}]);
The problem with the directive is that the scope.$watch fires only when an error object of dates is changing, and the scope.input of every input becomes similar to the ctrl of the changed date input.
JSFiddle

Update your directive to watch if the input is invalid
module.directive('validator', [function() {
return {
restrict: 'A',
require: '^form',
link: function(scope, elem, attr, form) {
var inputName = attr.name;
console.log(inputName, form[inputName].$error)
function watcherForRequired(){
return form[inputName].$error.required;
}
function watcherForMin(){
return form[inputName].$error.min;
}
scope.$watch(watcherForRequired, function(required) {
console.log("required", required);
})
scope.$watch(watcherForMin, function(min) {
console.log("min error", min);
})
}
}
also update ng-min to min="{{loan.loaned}}"
here is JSFiddle

After deep checking of the directive behavior. I find out that the scope.input of the last element infect all the others scopes.
So I set the $watch to listen to ctrl.$error, and it solved the problem.
The directive:
module.directive('validator', [function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elem, attr, ctrl) {
scope.$watch(function() {return ctrl.$error}, function() {
if (ctrl.$invalid) {
console.log(attr.name, 'invalid');
}
else {
console.log(attr.name, 'valid');
}
}, true);
}
}
}]);
Updated JSFiddle

You're doing this to display error messages? Why not simply do this in the template?
<form name="myform">
<input ng-model="myform.model.user-name" name="user-name" id="my-form-user-name" />
<div ng-messages="myform.user-name.$error">
<p ng-if="myform.user-name.$invalid">My Error Message Here</p>
</div>
</div>

Call jQuery plugin function in AngularJS

I am use jQuery plugin select2 and want call select2 function in AngularJS. I know that can use angular-ui/ui-select, but page design require jQuery plugin select2.
I want to change the value in the model Angular and change the value of the select2.
I create Angular directive and I want to call select2 function, but do not know how to implement it correctly:
angular.module("myModule").directive("select2Value", [
function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
scope.$watch(function() {
element.select2().val(ngModel.$modelValue).change();
});
}
};
}
]);
I have this error:
Error: [$rootScope:inprog] $digest already in progress
For fix this error I am use this solution: https://stackoverflow.com/a/36219812/6746305 :
angular.module("myModule").directive("select2Value", [
"$timeout", function($timeout) {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
var timeout;
changeValue(function() {
element.select2().val(ngModel.$modelValue).change();
});
timeout = void 0;
scope.$watch(function() {}, function(newVal, oldVal) {
if (timeout) {
$timeout.cancel(timeout);
}
timeout = $timeout(changeValue, 1000);
});
}
};
}
]);
But this not work: I am change value in Model Angular, but this value not change in select2.

I am find solution for change value in jQuery:
angular.module("myModule").directive("select2Value", [
"$timeout", function($timeout) {
return {
restrict: 'A',
priority: 0,
link: function(scope, element, attr, ngModel) {
return scope.$watch(attr.ngModel, function(value) {
return $timeout(function() {
return element.val(value).change();
});
});
}
};
}
]);
Solution find here (thank you this blog): http://blog.virtualzone.de/2015/08/angularjs-watching-for-changes-in-ng-model-and-determine-linked-dom-element.html

How to change ng-model scope value in custom Angular directive?

There is the following custom directive code:
angular.module('app.directives', ['ng']).directive('liveSearch', [
'$compile', '$timeout', function($compile, $timeout) {
return {
restrict: 'E',
replace: true,
require: 'ngModel',
scope: {
ngModel: '=',
liveSearchCallback: '=',
liveSearchSelect: '=?',
liveSearchItemTemplate: '#',
liveSearchWaitTimeout: '=?',
liveSearchMaxResultSize: '=?',
liveSearchResultField: '=?'
},
template: "<input type='text' />",
link: function(scope, element, attrs, controller) {
scope.$watch('selectedIndex', function(newValue, oldValue) {
var item;
item = scope.results[newValue];
if (item) {
scope.ngModel = '10';
element.val(item[attrs.liveSearchResultField]
}
});
}
}}]);
It's not a complete code of my directive, but it's enough to understand the problem. Also view code:
<live-search class="form-control" id="search1" live-search-callback="mySearchCallback" live-search-result-field="title"ng-model="skill" type="text"></live-search>
Value: {{ skill }}
<button class="btn btn-success" type="submit" ng-click="createEmployee">Сохранить</button>
My controller code:
$scope.createEmployee = function() {
console.log($scope.skill);
};
As you can see my custom directive has 'ng-model' attribute with name of variable 'skill'. How can I change 'skill' value in my custom directive? My way doesn't work. Thanks in advance!

In your link: try using
link:function(scope, element, attrs, ngModel){
scope.$watch('selectedIndex', function(newValue, oldValue) {
var item;
item = scope.results[newValue];
if (item) {
ngModel.$setViewValue(10);
ngModel.$render() // will update the input value as well
element.val(item[attrs.liveSearchResultField];
}
});
}
also it seems you have missed space between to separate ng-model attribute in your HTML
<live-search class="form-control" id="search1" live-search-callback="mySearchCallback" live-search-result-field="title" ng-model="skill" type="text"></live-search>
See the documentation here

When you use require: 'ngModel', the 4th parameter passed to your link function is ngModelController. Use method $setViewValue to update the value of ngModel passed to your directive, then call $render() if your view needs to be updated as well.
link: function(scope, element, attrs, ngModelController) {
scope.$watch('selectedIndex', function(newValue, oldValue) {
var item;
item = scope.results[newValue];
if (item) {
ngModelController.$setViewValue(10);
ngModelController.$render();
element.val(item[attrs.liveSearchResultField]
}
});
}

Angularjs directive

I want to have an attribute directive a bit similar to ng-model. I just want to additionally bind an input fields value to a scope variable (just in one direction input field -> scope variable). So I have just tried this directive but I can not get the directive called anyway.
script:
.directive('passivemodel', function () {
return {
restrict: "A",
scope: {
passivemodel: '='
},
link: function (scope, element, attrs) {
scope.$watch('passivemodel', function(newPassivemodel, oldPassivemodel) {
console.log("passive model", newPassivemodel);
});
}
};
})
html:
<input data-passivemodel="keyword">
Edit:
Hmmm .. based on vilo20 answer I am running into a very strange behavior.
while this code is working very well:
<input data-ng-model="keyword" data-passivemodel="keyword">
this one does not (note the value of passivemodel):
<input data-ng-model="keyword" data-passivemodel="keyword2">. Sure I have defined the variable in the controller.
Controller:
.controller('SearchController', function($scope, $routeParams, $search) {
$scope.search = new $search();
$scope.keyword = "";
$scope.keyword2 = "";
})
Edit2: here is a fiddle http://jsfiddle.net/HB7LU/12107/

try this:
.directive('passivemodel', function () {
return {
restrict: "A",
scope: {
passivemodel: '='
},
link: function (scope, element, attrs) {
console.log("passive model", scope.passivemodel);
$scope.$watch('passivemodel', function(newPassivemodel, oldPassivemodel) {
//put your logic when passivemodel changed
});
}
};
})
Hope it helps
Edit: Here is a plunker http://plnkr.co/edit/T039I02ai5rBbiTAHfzv?p=preview

Use the scope attribute:
.directive('passivemodel', function () {
return {
restrict: "A",
scope: {
"passivemodel": "="
},
link: function (scope, element, attrs) {
console.log("access passivemodel: ", scope.passivemodel);
}
};
})

Finally it was as simple as that:
.directive('modelRed', [function(){
return {
require: 'ngModel',
restrict: 'A',
scope: {},
link: function (scope, element, attrs, ngModel) {
scope.$watch(function () {
return ngModel.$modelValue;
}, function(newValue) {
scope.$parent[attrs.modelRed] = newValue;
//console.log(attrs.modelRed, newValue, scope);
});
}
}
}])
And in the html:
<p><input type="text" data-ng-model="testInput" data-model-red="redInput">{{redInput}}</p>
Of course you have to define testInput and redInput in the $scope object.

Parser function does not get called for change in input textbox

I am new to parsers and formatters. I have a directive that will be doing validation on change of the model.One way to do this is the $watch but from what I understand that is not a good way since it allows the model to be updated.
So I was looking at parsers and tried this code
app.directive('myDirective', function($compile) {
return {
restrict: 'E',
require: 'ngModel',
scope: {
},
link: function($scope, elem, attr, ctrl) {
console.debug($scope);
ctrl.$formatters.push(function(value) {
console.log("hello1");
return value;
});
ctrl.$parsers.unshift(function(value) {
debugger;
console.log("hello");
return value;
});
}
};
});
But the parser function is never called. The formatter is called once. Please see the plunkr .Can anyone tell me what I am doing wrong ,why is the parser function not getting called when i type in the textbox ?

This is a late response, but for reference:
I think you where missing the "glue" that will call the $parsers while ui changes occurs. This should be something like:
app.directive('myDirective', function($compile) {
return {
restrict: 'E',
require: 'ngModel',
scope: {
},
link: function($scope, elem, attr, ctrl) {
console.debug($scope);
ctrl.$formatters.push(function(value) {
console.log("hello1");
return value;
});
ctrl.$parsers.unshift(function(value) {
return value;
});
scope.$watch('directive model here', function() {
ctrl.$setViewValue(<build model from view here>);
});
}
};
});
For a full reference please see this (awesome) post.

Your link function is not called because the associated DOM element is not changing, just the model is. This works:
HTML:
This scope value <input ng-model="name" my-directive>
JS:
app.directive('myDirective', function($compile) {
return {
require: 'ngModel',
link: function($scope, elem, attr, ctrl) {
ctrl.$parsers.unshift(function(value) {
console.log("hello");
});
}
};
});
See here for more on when the link function is called.