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でどのように行われますか? すなわち

4

1 に答える 1

4

解決

Isolate スコープ バインディングは、「=」ではなく「&」で宣言する必要があります。これにより、指定された関数がscope.callBack()実行さupdatePerson(person)れます。

説明

スコープを分離するときは、「@」、「=」、および「&」を使用します。

  • 「@」は、要素スコープに対する属性評価の結果を監視するようにangularに指示します
  • "=" で getter/setter をビルドするよう angular に指示します$parse
  • 「&」は、Angular に属性を評価する関数をバインドするように指示します (オプションとして、この関数呼び出しの引数として属性定義スコープの拡張を提供します)。

したがって、この最後のオプション「&」を選択すると、 isolatecallBack()ディレクティブ スコープでの呼び出しが、実際にはupdatePerson(person)スコープ外 (isolate スコープからのオブジェクトで拡張されていない) に対して再度呼び出されることを意味します。

スコープ拡張機能を考慮に入れると、 のperson引数をupdatePerson(person)を呼び出すことで置き換えることができますscope.callBack({person: {a:1}})。次に、呼び出しスコープ（ angular ではなく関数スコープ）にありpersonました。{a:1}updatePersonscope

于 2014-03-20T22:10:36.343 に答える