カスタムディレクティブに変更をラップする方法は？

Question

私はinput-textと呼ばれる簡単な指示文を持っています。これは基本的に入力コントロールをラップします。

input-textに与えられた値はng-modelに渡され、正常に動作します。今私はまた、input-changeという属性にこれを渡すことによって、モデルの変更に応じて呼び出される関数を渡したいと思います。

angular.module('test').directive('inputText', function() { 
    return { 
    restrict : 'A', 
    scope : { 
     inputText : '=' 
    }, 
    template : '<input ng-model="inputText" />', 
    link : function(scope, element, attr) { 
     var model = element.find('input').controller('ngModel'); 
     model.$viewChangeListeners.push(function() { 
     scope.$parent.$eval(attr.inputChange); 
     }); 
    } 
    } 

}); 

詳細はhttp://plnkr.co/edit/qC7FlxVNKH4SrAhLoJy4を参照してください。

コントロールに入力するたびに関数が呼び出されますが、コンソールにログインした値は現在のコントロール（ただし前のもの）の$viewValueではありません。

Iはまた、そうのような入力制御にng-changeinput-changeにに与えられた文字列を渡すことにより、別のアプローチを試みた：

angular.module('test').directive('inputText', function() { 
    return { 
    restrict : 'A', 
    scope : { 
     inputText : '=', 
     inputChange : '&' 
    }, 
    template : '<input ng-model="inputText" ng-change="inputChange()" />', 
    } 

}); 

http://plnkr.co/edit/SutAFnCgo10QNmvBFsDs

をしかし、出力が上記の例と同様です。

誰かがこの動作を説明したり、ここで何が問題になっているのかを教えてください。

Answer 1

これを回避する1つの方法は、入力値をそのinput-changeバインディングに明示的に公開することです。

<input ng-model="inputText" ng-change="inputChange({value: inputText})" /> 

そして内側のスコープではなく、外側のスコープからtest.model.name変数からそのvalue変数を使用します：input-change="test.callback(value)"

http://plnkr.co/edit/SNatIAkPIHFSMooMWWFS?p=preview

---

Aあなたはこのテンプレートを使用することができることを行うために、 2番目の選択肢は、scope.$watchで変更を監視し、トリガされたときにのみ機能をトリガーすることです。

link: function(scope) { 
    scope.$watch('inputText', function(n) { 
    scope.inputChange(); 
    }); 
} 

http://plnkr.co/edit/Vrwe3SC3ejMG4aFIwBTU?p=preview