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

Popular posts from this blog

java - WrongTypeOfReturnValue exception thrown when unit testing using mockito -

php - Magento - Deleted Base url key -

android - How to disable Button if EditText is empty ? -