1

我实际上是在尝试重新创建 ng-change，但在其中添加了一些延迟（更改频率超时时自动保存）。

到目前为止，我有以下指令：

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

}]);

这个标记应该能够定义要调用的控制器范围方法以及传递给它的对象：

<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/

如您所见，我不知道如何使用传递给它的“person”参数调用指令属性参数。

所以就像我说的，一开始......只是试图通过一些“调整”来重新创建 ng-change。这是如何在 ng-change 中完成的？IE

4

1 回答 1

4

解决方案

隔离范围绑定应该用“&”而不是“=”声明，从而导致scope.callBack()执行updatePerson(person)给定的函数。

解释

隔离范围时，您可以使用“@”、“=”和“&”：

  • "@" 告诉 Angular 观察针对元素范围的属性评估结果
  • "=" 告诉 Angular 构建 getter/setter$parse
  • “&”告诉 Angular 绑定一个将评估属性的函数（并且，作为一个选项，提供属性定义范围的扩展作为此函数调用的参数）。

因此，当您选择最后一个选项“&”时，这意味着调用callBack()隔离指令范围实际上将调用updatePerson(person)外部范围（不使用来自隔离范围的任何对象进行扩展）。

考虑到范围扩展能力，您可以通过person调用. 然后将在调用范围内（函数范围，而不是 angular ）。updatePerson(person)scope.callBack({person: {a:1}})person{a:1}updatePersonscope

于 2014-03-20T22:10:36.343 回答