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

Question

What i'm trying to do is on click of a button i'm trying to give the user the option to select one of the 2 images displayed and make the selected image draggable. My code shows 2 images and 1 is draggable. I'm not able to figure out how to add the feature to let user select one of the 2 images and den make that selected image draggable

Here is my html code

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

</hello>
</div>

Here is the javascript code

    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();
        }
    };
})

Here is the jsfiddle

Answer 1

Some suggestions first. Unless absolutely necessary don't create custom components / directives. Generally its a tendency to create custom components because people still think in JQuery or DOM manipulation. Think data first and then think how data + data-binding is going to modify your view. The reason I am putting this forward is because of your hello directive which is just a template expander, isnt it? I am going to assume that it was just for demo purposes and not something you were planning to use in production. Lets come to what you want to achieve.

Two different markers which have a property of draggability but this property can be turned on or off..

Here is the directive that achieves that.

.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);
                }
            });
        }
    };
})

Now once you write such a directive then adding a "drag"-ability is a piece of cake.. To any element add a drag="dragVariable" and it will become draggable based on whether dragVariable is true or false. Ofcourse this implementation is based on JQuery UI providing us the drag functionality.

Here is the final fiddle where we have setup two checkboxes which can be used to toggle the drag states of the two markers.. When drag1 is turned on you can drag marker 1 and when turned off the drag features stops working..

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

Hope this helps.

Answer 2

if you change your id to classes it should work, since your id is only referencing the first image.

for instance if you use the class "image" and then append the one you want selected with "draggable" you should end up with this when you click the second image:

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

for this your selector would be

$("image.draggable")