Angular指令：可切換圖像作爲隔離範圍

我想rewrite this fiddle作爲指令。這是我第一次使用Angular進行的實驗。我實際上從w3學校得到了這個想法，dom manipulation Angular指令：可切換圖像作爲隔離範圍

我以爲我的小提琴很好寫，但是，在讀完coupling behaviour to a directive may be an anti design pattern後，我又一次茫然了。因此設計一個元素爲

<photo> 
    <img ng-click="toggleOnOff()" ng-src="{{'togglePhotoSrc()'}}"/>

似乎不推薦。對？

我想解決這個問題作爲一個孤立的範圍。我希望在指令中知道這兩個網址。如果可能的話，我想這樣做，而不使用element.addClass。

設計建議像工作示例一樣受到重視。

編輯：我得到了這個工作，但會很感激意見，尤其是在更好的設計方面！

<body ng-controller="MyCtrl"> 
<div><pre>State is on = {{isOn}}</pre></div> 
<div> 
    <input type="checkbox" ng-model="isOn" />Switch the light 
     <a toggle="isOn"> 
      <img ng-src="{{ getToggledUrl() }}"> 
     </a> 
</div> 


<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> 

<script> 
    angular.module('app', []) 
     .directive('toggle', function() { 
      return { 
       scope: { 
        toggle: "=" 
       }, 
       link: function($scope, element, attrs) { 

        element.click(function() { 
         $scope.$apply(function() { 
          var src = element.find('img').attr('src'); 
          $scope.toggle = !$scope.toggle 

         }) 
        }) 
       } 
      } 
     }) 

    function MyCtrl($scope) { 
      $scope.isOn = false; 
      $scope.onUrl = "http://www.w3schools.com/js/pic_bulbon.gif"; 
      $scope.offUrl = "http://www.w3schools.com/js/pic_bulboff.gif"; 
     //toggle image 
      $scope.getToggledUrl = function() { 
      return $scope.isOn ? $scope.onUrl : $scope.offUrl; 
    }; 
}

來源

2014-02-12 scalaGirl

爲什麼在指令中切換類別？此外你是什麼意思你想知道指令內的src？你想通過他們嗎？在任何情況下，如果你想擺脫jQuery，我認爲你的指令中的模板將是角色的一種方式。 – masimplo

toggleClass已移除 - 我的錯誤&&！故意。我原先的想法是將URL封裝在指令中，因爲我認爲隔離範圍用於可重用組件。這是一個錯誤嗎？我只使用jquery導致所有其他嘗試失敗。我從一個模板開始，但如何設計新指令的外觀應該如何。 – scalaGirl

我已經做了一個重要的演示，我將如何去做。我不知道你是否需要指令外的指令狀態值，所以我有兩個版本，一個是從控制器範圍開始/關閉的值，然後是另一個具有所有內部邏輯的值的。

「接口」兩個指令如下：

<my-toggle value="isOn" on-url="http://www.w3schools.com/js/pic_bulbon.gif" off-url="http://www.w3schools.com/js/pic_bulboff.gif"></my-toggle> 


<my-toggle-internal message="toggle me too" on-url="http://www.w3schools.com/js/pic_bulbon.gif" off-url="http://www.w3schools.com/js/pic_bulboff.gif"></my-toggle>

這裏是plunker http://plnkr.co/edit/1cdHuy

因爲我不知道你心裏有什麼理想的解決辦法是我贏了」 t直到你指向正確的方向，所以我不解釋你已經知道的事情。儘管如此，請隨時提問。

來源

2014-02-13 10:41:36 masimplo

我想到的是成爲寫作指令的專業人士。它的一個DSL的事實，讓我非常興奮。編寫一個顯示內容的乾淨界面對我來說非常重要，而我無法做到。這個角度社區是驚人的。特別具有挑戰性的是解決相同問題的許多方法。 – scalaGirl

對於一個簡單的圖像切換，你可能有一個隱藏/顯示樣式，而不是一個更簡單的時間：

<input type="checkbox" ng-model="isOn" />Switch the light 
<img ng-show="isOn" ng-src="{{ onUrl }}"> 
<img ng-hide="isOn" ng-src="{{ offUrl }}">

如果你寫了這個指令，你可以使用上述內容作爲模板，並提供onUrl和offUrl作爲參數。如果控制超出指令範圍，您也可以提供isOn。

希望這會有所幫助！

來源

2014-02-13 01:32:09 jkinkead

非常好的答案。非常乾淨可讀。或許bool應該重命名ifOn。也許一個很好的界面可能是 scalaGirl

隔離作用域非常適用於像上面這樣非常簡單的小部件（無隔離或控制器邏輯）。一般來說，如果你像純函數一樣處理你的指令，並且只依賴你提供給它們的屬性 - 而不是外部作用域變量 - 你將避免隔離範圍可能導致的很多痛苦。否則，隔離範圍可能非常棘手！ – jkinkead

Thx清理了很多。然而在我們的例子中，在微小的控制器中有一個小的isOn保持狀態。所以可以或應該將它移到其他地方。我很清楚國家屬於控制者，但我不清楚何時將其置於指令或指令之外。那麼你會不會在這種情況下使用隔離範圍，它有一個微不足道的控制器？ – scalaGirl

Angular指令：可切換圖像作爲隔離範圍

回答

相關問題