Pass object context back to controller callback from AngularJS Directive

问题

I'm essentially trying to recreate ng-change but add some delay in it (auto-save on change frequency timeout).

So far, I have the 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 I pass person??
                        scope.callBack();
                    }, 500);
                }
                firstRun = false;
            });
        }
    };
}]);

With the 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 to update:");
        //How can I get person here??
        //console.log(person);
    };

}]);

And this markup should be able to define which controller scope method to call as well as the object that is 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's an failing fiddle: http://jsfiddle.net/Troop4Christ/fA4XJ/

As you can see, I can't figure out how to call the directive attribute parameter w/ the "person" parameter passed to it.

So like I said, at the begining.. just trying to recreate ng-change w/ some "tweaking". How is this done in ng-change? i.e.

回答1:

Solution

Isolate scope binding should be declared with "&" instead of "=", thus resulting in scope.callBack() executing the updatePerson(person) given function.

Explanations

When isolating a scope, you work with "@", "=" and "&":

"@" tells angular to watch the result of attribute evaluation against the element scope
"=" tells angular to build the getter/setter with $parse
"&" tells angular to bind a function that will evaluate the attribute (and, as an option, provide an extension to the attribute definition scope as an argument to this function call).

So, when you choose this last option "&", it means that calling callBack() on the isolate directive scope will actually call updatePerson(person) againts the outside scope (not extended with any object coming from isolate scope).

Taking the scope extension capability into account, you could have replaced the person argument of the updatePerson(person) by calling scope.callBack({person: {a:1}}). Then person would have been {a:1} in the updatePerson call scope (function scope, not angular scope).

来源：https://stackoverflow.com/questions/22545821/pass-object-context-back-to-controller-callback-from-angularjs-directive

标签

javascript

angularjs

angularjs-directive

angularjs-ng-change