Javascript 无法确定如何修改角度指令

我试图做的是，单击一个按钮，我试图给用户一个选项，从显示的两个图像中选择一个，并使所选图像可拖动。 我的代码显示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();
        }
    };
})

angular.module（'test'，[]）指令（'hello'，function（）{
返回{
限制：'E'，
模板：“”，
替换：正确，
链接：函数（范围、元素、属性）{
$（“先生”）draggable（）；
}
};
})

---

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

两个不同的标记，其属性为draggability，但此属性可以打开或关闭

这是实现这一目标的指令

.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变为draggable。 当然，这个实现是基于jQueryUI的，它为我们提供了拖动功能

这里是最后一个提琴，我们设置了两个复选框，可以用来切换两个标记的拖动状态。。启用drag1后，可以拖动标记1，禁用drag1后，拖动功能将停止工作

---

希望这有帮助。

如果您将id更改为类，它应该可以工作，因为您的id仅引用第一个图像

例如，如果使用“image”类，然后将要选择的类附加到“draggable”中，则在单击第二个图像时，应以该类结尾：

<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>

---

这并不是我想要的，但让我开始还是很好的。thnks:）我想要的是一个弹出窗口，其中会显示两个标记，我选择的一个将在屏幕上使用

$("image.draggable")