web-dev-qa-db-ja.com

内部ディレクティブからのコントローラーモデル値の監視

angular $viewValueディレクティブ内からのコントローラーの。

フィドル： http://jsfiddle.net/dkrotts/TfTr5/5/

function foo($scope, $timeout) {
    $scope.bar = "Lorem ipsum";

    $timeout(function() {
        $scope.bar = "Dolor sit amet";
    }, 2000);
}

myApp.directive('myDirective', function() {
    return {
        restrict: 'A',
        require: '?ngModel',
        link: function (scope, element, attrs, controller) {
            scope.$watch(controller.$viewValue, function() {
                console.log("Changed to " + controller.$viewValue);
            });
        }
    } 
});

現状では、$ watch関数は、コントローラー内部から2秒後に行われたモデル変更をキャッチしていません。私は何が欠けていますか？

angularjsangularjs-directive
22
Dustin

追加したい：1.2.xでは、分離されたスコープで、上記は機能しません。 http://jsfiddle.net/TfTr5/23/

私が思いついた回避策は、$ watchも関数を受け入れるという事実を使用していたため、それを使用してコントローラーにアクセスできます。

scope.$watch(
    function(){return controller.$viewValue},
    function(newVal, oldVal){
        //code
    }
)

作業フィドル： http://jsfiddle.net/TfTr5/24/

誰か他の人がいるなら、喜んで歓迎します！

9
wlingke

分離スコープ内の値をバインドする場合、2つの方法があります。分離スコープがない場合でも使用できる最初の方法は次のとおりです。

1）$attrs.any_attributeを使用してバインドします（ウォッチで設定）

2）2 way binding（ '='）メソッドを使用し、リスナーに設定します

あなたがここで例でもっと欲しいなら素晴らしい記事です

http://www.w3docs.com/snippets/angularjs/bind-variable-inside-angularjs-directive-isolated-scope.html

1
Hazarapet Tunanyan

モデル値のデバウンスが必要な場合は、ng-model-optionのデバウンス設定に言及する価値があります。

<input type="text" ng-model-options="{ debounce: 1000 }" ng-model="search"/>

たとえば、この時計は変更後1000 msでトリガーされ、新しい変更でリセットされます。

scope.$watch(attrs.ngModel, function(newValue) { });

https://docs.angularjs.org/api/ng/directive/ngModelOptions

0
Frankey