javascript - Pass object context back to controller callback from AngularJS Directive -
i'm trying recreate ng-change add delay in (auto-save on change frequency timeout).
so far, have following directive:
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 pass person?? scope.callback(); }, 500); } firstrun = false; }); } }; }]);
with following controller:
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 update:"); //how can person here?? //console.log(person); }; }]);
and markup should able define controller scope method call object passed 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's failing fiddle: http://jsfiddle.net/troop4christ/fa4xj/
as can see, can't figure out how call directive attribute parameter w/ "person" parameter passed it.
so said, @ begining.. trying recreate ng-change w/ "tweaking". how done in ng-change? i.e.
solution
isolate scope binding should declared "&" instead of "=", resulting in scope.callback()
executing updateperson(person)
given function.
explanations
when isolating scope, work "@", "=" , "&":
- "@" tells angular watch result of attribute evaluation against element scope
- "=" tells angular build getter/setter
$parse
- "&" tells angular bind function evaluate attribute (and, option, provide extension attribute definition scope argument function call).
so, when choose last option "&", means calling callback()
on isolate directive scope call updateperson(person)
againts outside scope (not extended object coming isolate scope).
taking scope extension capability account, have replaced person
argument of updateperson(person)
calling scope.callback({person: {a:1}})
. person
have been {a:1}
in updateperson
call scope (function scope, not angular scope
).
Comments
Post a Comment