マウス クリックを受け入れ、その状態がモデルに依存するカスタム DOM 要素が必要です。
<card ng-repeat="card in cards" x="card.x"
y="card.y" color="card.color" on-click="test_click('b')">
</card>
DOM 属性を介してコントローラーのスコープ変数にバインドするカスタム ディレクティブを作成し、それらを使用してビューを変更することができます。ディレクティブが親スコープを継承できるようにすることで、これが機能します。
app.directive('card', function ($timeout) {
return {
restrict:'E',
link:function (scope, element, attrs) {
element.addClass('card');
element.click(function(){
scope.onClick()
});
scope.$watch(attrs.x, function (x) {
element.css('left', x + 'px');
});
scope.$watch(attrs.y, function (y) {
element.css('top', y + 'px');
});
scope.$watch(attrs.color, function (color) {
element.css('backgroundColor', color);
});
}
/*
,scope:{
x:'=',
y:'=',
color:'=',
onClick: "&"
}
*/
};
});
分離されたスコープを作成し、再配線を行うことで (上記のスコープにコメントを付けることで)、マウス クリック イベントをコントローラーに伝達することができます。
ただし、両方の動作を同時に機能させることはできません。
属性値にバインドされた x 変数を取得する必要があると思います。これは、私がやろうとしたことです。しかし、考えられるすべての構文の組み合わせを試しても、うまく動作しないようです。
これが完全なケースjsfiddleです