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

如果我了解您要做什么，您可以使用 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}" >

小提琴

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

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

更新：我想出了如何在没有 jQuery 的情况下让它工作——将 'px' 添加到 ng 样式：

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

对于第二个小提琴，我还添加了一个“将卡片 #1 向下移动 200 像素”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 回答