I am currently working on creating a modified version of ng-change with a delay feature for auto-saving changes.
Here is the custom directive I have implemented:
myApp.directive('changeDelay', ['$timeout', function ($timeout) {
return {
restrict: 'A',
require: 'ngModel',
scope: {
callBack: '=changeDelay'
},
link: function (scope, elem, attrs, ngModel) {
var firstRun = true;
scope.timeoutHandle = null;
scope.$watch(function () {
return ngModel.$modelValue;
}, function (nv, ov) {
console.log(firstRun);
if (!firstRun) {
console.log(nv);
if (scope.timeoutHandle) {
$timeout.cancel($scope.timeoutHandle);
}
scope.timeoutHandle = $timeout(function () {
//How can I pass person??
scope.callBack();
}, 500);
}
firstRun = false;
});
}
};
}]);
And this is the controller for it:
myApp.controller('MyCtrl', ['$scope', function ($scope) {
$scope.people = [{
name: "Matthew",
age: 20
}, {
name: "Mark",
age: 15
}, {
name: "Luke",
age: 30
}, {
name: "John",
age: 42
}];
$scope.updatePerson = function (person) {
//console.log("Fire off request to update:");
//How can I get person here??
//console.log(person);
};
}]);
This HTML markup should allow for specifying the controller scope method and the object to be passed to it:
<div ng-app='myApp'>
<div ng-controller="MyCtrl">
<div ng-repeat="person in people">
<input type="text" ng-model="person.name" change-delay="updatePerson(person)" />
</div>
</div>
</div>
Here is the failing fiddle link for reference: http://jsfiddle.net/Troop4Christ/fA4XJ/
It seems that I am struggling to figure out how to pass the "person" parameter to the directive attribute.
In summary, my goal is to replicate the functionality of ng-change with some modifications. How can this be achieved using ng-change?