I have an attribute directive that I use to send the value of an input field to my server (my-auto-save), and that works fine. Now I want to add to that directive the capability of validating my value and only in case of success it sends the value to the server.
For this I thought about adding another attribute to my tag like so:
<input type="text"
my-auto-save="saveHandler(field, value)"
my-auto-save-validations="validateNumeric(value)" />
My auto save directive is like this:
myMod.directive("myAutoSave",
function () {
return {
restrict: "A",
scope: {
saveHandler: "&myAutoSave"
},
require: "ngModel",
link: function (scope, elm, attr) {
var fieldName = "test";
var newValue = "new value test";
scope.saveHandler({fieldChanged: fieldName, newValue: newValue});
}
};
}
);
Now, before calling the scope.saveHandler how can I call my validation function passing the newValue value to it?
I know how to access it like attr.myAutoSaveValidations but I don't know how to correctly call the function passed like that...
You can add more stuff to your scope:
scope: {
saveHandler: "&myAutoSave",
validationFunction: "&myAutoSaveValidations"
},
Related
I need to format the input values so I create a directive that use a template with require: 'ngModel' because I have to use ngModelController functions ($parsers, $formatters, etc.).
This is my HTML:
<div ng-model="myInputValue" amount-input-currency=""></div>
{{myInputValue}}
This is my directive:
.directive('amountInputCurrency', [function(){
return {
templateUrl: '../amountInputCurrency.tmpl.html',
require: 'ngModel',
restrict: 'A',
link: function(scope, elem, attrs, model) {
// ...
}
}
}
And this is my template:
<input type="text" ng-model="myInputValue">
The problem is that I can't updated the view after formatting the inserted value. For example if I write '1' I want change the value in this way:
model.$formatters.push(function(value) {
return value + '00';
}
Alternative I try to set an event in this other way:
<input type="text" ng-model="myInputValue" ng-blur="onBlur()">
scope.onBlur = function() {
model.$viewValue = model.$viewValue + '00';
// or model.$setViewValue(model.$viewValue + '00';);
model.$render();
};
The model.$viewValue changes, myInputValue (in the HTML with {{myInputValue}}) changes but not the value showed in the input box... which is the problem? Thanks!
----------------UPDATE----------------
Probably the problem is because I have 2 ng-model (one in the HTML and one in the template): https://github.com/angular/angular.js/issues/9296
How can I do? Both model refer to the same model...
Formatters change how model values will appear in the view.
Parsers change how view values will be saved in the model.
//format text going to user (model to view)
ngModel.$formatters.push(function(value) {
return value.toUpperCase();
});
//format text from the user (view to model)
ngModel.$parsers.push(function(value) {
return value.toLowerCase();
});
Try using $parsers to change the view to your desired value.
I hope this will help you.
Update:
angular.module('components', []).directive('formatParse', function() {
return {
restrict: 'E',
require: 'ngModel',
scope: { model: "=ngModel" },
template: '<input type="text" data-ng-model="model"></input><button type="button" data-ng-click="clickedView()">SetView</button><button type"button" data-ng-click="clickedModel()">SetModel</button>',
link: function ($scope, el, attrs, ngModelCtrl) {
format = "MMM Do, YYYY H:mm";
console.log($scope.model);
console.log(ngModelCtrl);
$scope.clickedView = function () {
ngModelCtrl.$setViewValue(ngModelCtrl.$viewValue);
};
$scope.clickedModel = function () {
$scope.model = 12; // Put here whatever you want
};
ngModelCtrl.$parsers.push(function (date) {
console.log("Parsing", date)
return date; // Put here the value you want to be in $scope.model
});
ngModelCtrl.$formatters.push(function (date) {
console.log("Formatting", date);
console.log($scope.model);
console.log(ngModelCtrl);
return +date * 2; // Put here what you want to be displayed when clicking setView (This will be in ngModelCtrl.$viewValue)
});
}
}
});
angular.module('someapp', ['components']);
Try using this code and tell if this helped to get the result you wanted.
If it does I suggest, to console.log the ngModelCtrl that you way you will understand more about the inner flow of angular.
In addition, just so you have some more information,
When you edit the input in the view the formatters function are fired to change the model accordingly.
If the value that has been entered is not valid you can return in your formatters function the ngModelCtrl.$viewValue to keep $scope.model with his old and true information.
When you change your scope variable (in your case $scope.model) the parsers functions will be fired to change the view value. (You don't need to use $render, you just need to decide when you want to change your $scope.model),
I suggest instead of using $setViewValue put the value you want in your scope variable and the parsers will act accordingly.
I have a directive myEditable that toggle a <div> with an <input type=text> to allow inline edition :
<my-editable value="vm.contact.name"></my-editable>
I was happy with it until I read some articles that say that $scope.$apply should not be used. I'm using it when the user save his changes to update the model (vm.contact.name in my case) :
function save() {
scope.$apply(function(){
scope.value = editor.find('input').val();
});
toggle();
}
But since it is a bad thing, I would like to pass a callback method to my directive. This callback must be called with the new value when the user save his changes. However, it seems that I cannot add two fields to the directive scope :
return {
restrict: 'EA',
scope: {
value: '=value'/*,
onSave: '&onSave'*/
},
link: function(scope, element, attr) {
// ...
element.find('.save').click(function(){
save();
});
// Declaration of `save` as above.
}
}
If I uncomment onSave then the value is never received and onSave is undefined.
My question is, how can I give a value and a callback method to a directive ?
And, as bonus, how can I pass parameters to the callback ?
Thanks
You can pass 'n' number of fields in directives isolated scope.
If you want to pass a function use &. Keep this in mind if your property name is onSave then in the view use it like this on-save.
Your directive should look like below
app.directive('dir',function(){
return {
restrict: 'EA',
scope: {
onSave: '&'
},
link: function(scope, element, attr) {
// ...
debugger
console.log(scope.onSave)
scope.onSave();
// Declaration of `save` as above.
}
}
})
In the view you can pass the function like below
<dir on-Save='abc()'/>
OR
<dir on-save='abc()'/>
I have a scenario in an Angular 1.x project where I need to watch a controller form within a directive, to perform a form $dirty check. As soon as the form on a page is dirty, I need to set a flag in an injected service.
Here is the general directive code:
var directiveObject = {
restrict: 'A',
require: '^form',
link: linkerFn,
scope: {
ngConfirm: '&unsavedCallback'
}
};
return directiveObject;
function linkerFn(scope, element, attrs, formCtrl) {
...
scope.$watch('formCtrl.$dirty', function(oldVal, newVal) {
console.log('form property is being watched');
}, true);
...
}
The above only enters the watch during initialization so I've tried other approaches with the same result:
watching scope.$parent[formName].$dirty (in this case I pass formName in attrs and set it to a local var formName = attrs.formName)
watching element.controller()[formName] (same result as the above)
I've looked at other SO posts regarding the issue and tried the listed solutions. It seems like it should work but somehow the form reference (form property references) are out of scope within the directive and therefore not being watched.
Any advice would be appreciated.
Thank you.
I don't know why that watch isn't working, but as an alternative to passing in the entire form, you could simply pass the $dirty flag itself to the directive. That is:
.directive('formWatcher', function() {
restrict: 'A',
scope: {
ngConfirm: '&unsavedCallback', // <-- not sure what you're doing with this
isDirty: '='
},
link: function(scope, element, attrs) {
scope.watch('isDirty', function(newValue, oldValue) {
console.log('was: ', oldValue);
console.log('is: ', newValue);
});
}
})
Using the directive:
<form name="theForm" form-watcher is-dirty="theForm.$dirty">
[...]
</form>
I have a very simple directive (named cooperate-with-ng-change) which requires ng-model and I'd like it to cooperate with ng-change.
Restated, I'd like to be able to do <cooperate-with-ng-change ng-model="model" ng-change="changeHandler()"></cooperate-with-ng-change>
However I'm noticing when changeHandler() is fired, model is the old value and not the new one.
Here's the directive definition object:
return {
restrict: "E",
require: ["ngModel"],
scope: {
"value": "=ngModel"
},
template: "<label>Cooperate with NgChange: <input type='text' ng-model='value' ng-model-options='{debounce: 500}' /></label>",
link: function(scope, element, attrs, ctrls) {
var inputNgModelCtrl = element.find("input").controller("ngModel");
var parentNgModelCtrl = ctrls[0];
Array.prototype.push.apply(inputNgModelCtrl.$viewChangeListeners, parentNgModelCtrl.$viewChangeListeners)
//if I wrap all the parentNgModelCtrl.$viewChangeListeners in a timeout and digest in changeHandler
//then message matches afterDebounce
/*Array.prototype.push.apply(inputNgModelCtrl.$viewChangeListeners,
parentNgModelCtrl.$viewChangeListeners.map(
function(listener) {
return function() {
setTimeout(listener, 1)
}
}))
*/
}
}
Here's a plunker link if you want to play with it
My guess is $viewChangeListeners gets called before the model value is set, however I can't find what might correspond for after the model value is set.
I'm looking to change the functionality defined in the ng-show directive I have on the form fields to display issues with a form field.
For example:
<span class="help-inline" ng-show="showError(schoolSignup.last_name, 'required')">This field is required</span>
Where schoolSignup.last_name is the reference to the model controller for the field, and 'required' is the validation property I'm looking for.
Defined in a controller as
$scope.showError = function(ngModelController, error) {
return ngModelController.$dirty && ngModelController.$error[error];
};
I've been banging my head against a wall trying to work out how to move this to a directive so I don't have to re-define this in every controller. I was thinking of defining it like...
<span class="help-inline" show-error="required" field="schoolSignup.last_name">This field is required</span>
This is as far as I've got
.directive('showError', function () {
return {
restrict: 'A',
scope:{
field: "="
},
link: function(scope, elem, attrs, ctrl)
{
var errorType = attrs.showError;
scope.errors = scope.field.$error[errorType];
// NOT WORKING YET
}
};
});
How can I do this??
You're on the right track; however, the dot in formName.fieldName will give you trouble using the object[field] syntax. Instead, you could do this pretty nicely with the $parse service (docs):
app.directive("showError", function($parse) {
return {
link: function(scope, elem, attrs) {
// Returns a function that, when called with a scope,
// evaluates the expression in `attrs.field` (e.g.
// "schoolSignup.last_name") on the scope.
var getter = $parse(attrs.field);
// Every time a digest cycle fires...
scope.$watch(function() {
// ...get the input field specified in the `field` attribute...
var field = getter(scope);
// ...and check to see if the error specified by the
// `show-error` attribute is set.
if (field.$dirty && field.$error[attrs.showError]) {
elem.show();
} else {
elem.hide();
}
});
}
};
});
Here's a working example: http://jsfiddle.net/BinaryMuse/Lh7YY/