Question

我需要一个接受鼠标点击的自定义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

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）并将它们绑定到模型时，Angular会为我们执行watch（）。

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

更新：我想出了如何在没有jQuery的情况下使其工作 - 将“px”添加到ng-style：

<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会更加宽容。

对于第二个小提琴，我还添加了“移动卡＃1降低200px”ng-click / hyperlink，以证明更改模型会导致Angular自动为我们更新视图。

Answer 2

啊，啊，我有正确的方法，观察者已经破了。显然，我并不完全理解$ watch的语义，因为我并不完全理解这个解决方案。我只是通过打印范围来实现它，并且在隔离范围的情况下检测到正确的变量。

无论如何，解决方案：我将$ watch调用更改为： -

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

并跟踪对绑定变量的更改

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

2 个答案: