通过对象上下文回从AngularJS指令控制器回调 [英] Pass object context back to controller callback from AngularJS Directive

问题描述

我基本上是试图重新NG-变化，但它添加一些延迟（自动保存在更换频率超时）。

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;
            });
        }
    };
}]);

通过以​​下控制器：

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>

下面是一个失败小提琴： http://jsfiddle.net/Troop4Christ/fA4XJ/

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.

所以，就像我说的，在开始时..只是试图重新NG-变化瓦特/一些调整。这是如何在NG-变化呢？即

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.

推荐答案

隔离范围，应结合使用声明＆放大器;代替=，从而导致 scope.callBack（）执行的updatePerson（人）定的函数。

Solution

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

在隔离范围，则一起工作@，=和＆放大器;

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

• @讲述的角度看对元素scope属性评价
的结果

• =讲述的角度来构建与的getter / setter $解析


• ＆放大器;告诉角度绑定，将评估该属性的功能（并作为一种选择，提供的扩展属性的定义范围作为参数来调用这个函数）。

所以，当你选择最后一个选项＆放大器;，这意味着调用回调（）的分离指令范围将实际调用的updatePerson（人）反对票的范围之外（而不是从分离范围来任何对象扩展）。

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).

考虑范围扩展能力考虑进去，你可能已经取代了人的参数中的的updatePerson（人）通过调用 scope.callBack（{人：{A：1}}）。然后人将是 {A：1} 在的updatePerson 调用范围（功能范围，没有棱角范围）。

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).

这篇关于通过对象上下文回从AngularJS指令控制器回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！