Question

我要做的是点击按钮我试图让用户选择显示的2个图像中的一个并使所选图像可拖动。我的代码显示2个图像，1个可拖动。我无法弄清楚如何添加该功能，让用户选择2个图像中的一个，并使所选图像可拖动

这是我的HTML代码

    <div ng-app="test">
    <button name="Add" type="buton" ng-click="showMarker = true">Show List</button>
<hello>

</hello>
</div>

这是javascript代码

    angular.module('test', []).directive('hello', function() {
    return {
        restrict : 'E',
        template : '<div style="position: relative" ng-show="showMarker"><img id="mr" src="http://www.mbs.edu/i/gmap_marker_default.gif" /><img src="http://www.hypercosm.com/images/icons/add_marker_icon2.gif" /></div>',
        replace: true,
        link : function(scope, element, attrs) {
                 $("#mr").draggable();
        }
    };
})

以下是jsfiddle

Answer 1

首先提出一些建议。除非绝对必要，否则不要创建自定义组件/指令。一般来说，它倾向于创建自定义组件，因为人们仍然在思考JQuery或DOM操作。首先考虑数据，然后考虑数据+数据绑定将如何修改您的视图。我推进这个的原因是因为你的hello指令只是一个模板扩展器，不是吗？我将假设它仅用于演示目的而不是您计划在生产中使用的东西。让我们来达到您想要达到的目标。

两种不同的标记，具有可拖动性，但可以打开或关闭此属性..

这是实现这一目标的指令。

.directive('drag', function() {
    return {
        restrict : 'A',
        link : function(scope, elm, attrs) {
            $(elm).draggable({ containment: "window",disabled:false});
            scope.$watch(attrs.drag,function(val){
                if(val === true){
                    $(elm).draggable('option','disabled',false);
                }
                else{
                    $(elm).draggable('option','disabled',true);
                }
            });
        }
    };
})

现在，一旦你编写了这样的指令，那么添加“拖动”功能就是小菜一碟。对于任何元素添加一个drag =“dragVariable”，它将根据dragVariable是true还是false变为可拖动。当然，这个实现基于JQuery UI，为我们提供了拖动功能。

这是最后的小提琴，我们设置了两个复选框，可用于切换两个标记的拖动状态。当打开drag1时，您可以拖动标记1，当关闭时拖动功能停止工作..

http://jsfiddle.net/7fMCF/8/

希望这有帮助。

Answer 2

如果您将ID更改为类，则应该可以使用，因为您的id仅引用第一个图像。

例如，如果您使用类＆＃34;图像＆＃34;然后使用＆＃34; draggable＆＃34;附加您想要选择的那个;单击第二个图像时，您应该以此结束：

<div style="position: relative" ng-show="showMarker"><img class="image"  src="http://www.mbs.edu/i/gmap_marker_default.gif" /><img class="image draggable"  src="http://www.hypercosm.com/images/icons/add_marker_icon2.gif" /></div>

为此你的选择器将是

$("image.draggable")

无法弄清楚如何修改角度指令

2 个答案: