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

我想要做的是點擊一個按鈕，我試圖讓用戶選擇顯示的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

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

回答

相關問題