コントローラを持つ div 要素があります。div 要素には、オブジェクトへの ng-model バインディングを持つ input 要素が含まれます。input 要素には属性ディレクティブもあります。
属性ディレクティブにスコープを追加すると、コントローラーの ng-model バインディングが壊れます。これを機能させる方法はありますか、または回避策を探す必要がありますか?
http://jsbin.com/IvIFobU/4/で実行中のコードを確認できます。
HTML
<p>The input field below should say "foobar":</p>
<div ng-controller="fooController">
<input ng-model="object.string" foo-attribute="callback">
</div>
JavaScript
var app = angular.module('app', []);
app.controller("fooController", function($scope) {
$scope.object = {
string: 'foobar'
};
$scope.callback = function() {
console.log('callback');
};
});
app.directive('fooAttribute', function() {
return {
restrict: 'A',
// This scope breaks the ng-model on the input...
scope: {
callback: '&fooAttribute'
},
link: function(scope, element, attr) {
element.css('background', 'lightblue');
scope.callback();
}
};
});