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

我想要做的是点击一个按钮，我试图让用户选择显示的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

来源

2013-03-05 iJade

几点建议第一。除非绝对必要，否则不要创建自定义组件/指令。一般而言，它倾向于创建自定义组件，因为人们仍然会用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); 
       } 
      }); 
     } 
    }; 
})

现在，一旦你写这样的指令，然后添加一个“拖” -Ability是小菜一碟。要任何元素添加一拖=“dragVariable”，它会根据成为可拖动dragVariable是否为真或错误。 Ofcourse这个实现基于JQuery UI为我们提供拖动功能。

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

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

希望这会有所帮助。

来源

2013-03-05 13:37:59 ganaraj

实际上不是我想要的，但它仍然很好，让我开始..thnks :) – iJade 2013-03-06 08:43:02

@iBlue你想要什么？ – ganaraj 2013-03-06 12:01:38

我想要的是一个弹出式窗口，其中将显示2个标记，并且我选择的标记将在屏幕上使用 – iJade 2013-03-06 12:27:29

如果您将您的ID更改为类，它应该起作用，因为您的ID仅引用第一个图像。

例如，如果您使用的类“形象”，当你点击第二图像然后附加您希望与“拖动”你应该这样结束了选择的一个：

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

来源

2014-02-04 00:06:42 Olie440

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

回答

相关问题