2

マウス クリックを受け入れ、その状態がモデルに依存するカスタム 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です

4

2 に答える 2

3

あなたが何をしようとしているのか理解できれば、$watch()es の代わりに ng-style を使用でき、element.click() の代わりに ng-click を使用できます。

<card ng-repeat="card in cards" ng-click="test_click('b')"
  ng-style="{left: card.x, top: card.y, 'background-color': card.color}" >

フィドル

ビルド済みの Angular ディレクティブ (ngStyle、ngRepeat、ngClass、ngSwitch、ngShow など) を使用してモデルに関連付けると、Angular が watch() を実行します。

(jQuery を含めた場合にのみ機能する理由がわかりません。jQuery 固有のメソッドが呼び出されていません。)

更新：jQueryなしで機能させる方法を見つけました-ng-styleに「px」を追加します：

<card ng-repeat="card in cards" ng-click="test_click('b')
  ng-style="{left: card.x + 'px', top: card.y + 'px', 'background-color': card.color}" ">

フィドルを更新しました。

「px」を省略した場合、jQuery はどういうわけかより寛容になると思います。

2 番目のフィドルには、「move card #1 down 200px」ng-click/hyperlink も追加して、モデルを変更すると Angular が自動的にビューを更新することを証明しました。

于 2012-12-09T03:43:38.963 に答える
0

ああ、私は正しいアプローチをしていましたが、ウォッチャーは壊れていました。ソリューションを完全に理解していないため、$watch のセマンティクスを完全に理解していないことは明らかです。スコープを印刷し、適切な変数が分離されたスコープのケースに存在することを検出することによってのみ、私はそれに気づきました。

とにかく、解決策: $watch 呼び出しを次のように変更しました:-

scope.$watch("x", function (x) {
    element.css('left', scope.x + 'px');
});

そして、これはバインドされた変数への変更を追跡しました

于 2012-12-08T21:20:18.097 に答える