AngularJS 自定义指令，你如何绑定(bind)和接受鼠标事件？

Question

我需要一个接受鼠标点击并且其状态取决于模型的自定义 DOM 元素:-

<card ng-repeat="card in cards" x="card.x"
    y="card.y" color="card.color" on-click="test_click('b')">
</card>

我能够构建一个自定义指令，该指令通过其 DOM 属性绑定(bind)到 Controller 的范围变量，并使用它们来更改其 View 。我通过允许指令继承其父范围来实现此目的:

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: "&"
        }
        */
    };
});

通过创建一个隔离的范围并进行一些重新布线(通过在上面评论范围)，我可以让鼠标单击事件传播到 Controller 。

但是，我无法让这两种行为同时发挥作用。

我想我需要将 x 变量绑定(bind)到属性值，这是我试图做的。但即使尝试了我能想到的每一种语法组合，我似乎也无法让它发挥作用。

这是完整的案例 jsfiddle

Answer 1

如果我了解您要做什么，您可以使用 ng-style 代替 $watch()es，并使用 ng-click 代替 element.click():

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

Fiddle

当我们使用任何预先构建的 Angular 指令——例如，ngStyle、ngRepeat、ngClass、ngSwitch、ngShow——并将它们绑定(bind)到模型时，Angular 会为我们执行 watch()。

(我不明白为什么它只在我包含 jQuery 时才有效。我没有看到任何 jQuery 特定的方法被调用。)

更新 :我想出了如何在没有 jQuery 的情况下让它工作——在 ng 样式中添加“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}" ">

Updated fiddle .

我猜如果我们不使用“px”，jQuery 会更加宽容。

对于第二个 fiddle ，我还添加了一个“将卡片 #1 向下移动 200 像素”ng-click/hyperlink，以证明更改模型会导致 Angular 自动为我们更新 View 。