Angular JS指令

Question

我想將一個以html/jquery編寫的舊應用程序移植到angularjs。該方案是有一個名單和雪佛龍的點擊它顯示它下面的圖標集（下圖）

要走的路就是指令，我試圖修改一個適合的場景。我不清楚的是，我將如何限制一次只有一組圖標。 （）。icon-set）。hide（）它會隱藏所有的圖標，並在需要的時候點擊，例如點擊雪佛龍顯示圖標。

在角度的情況下，我有多個問題。我創建這個列表

<ul class="list" ng-repeat="file in files| filter: { folder:'false' }" > 
     <li class="list-main" > 
      <ext-img file-name="{{file['file-name']}}"></ext-img> 
      <div class="list-info"> 
       <div class="list-header">{{file['file-name']}}</div> 
       <div class="list-info-bottom dimfont"><small>{{ file['modified-timestamp'] | date:'medium' }}</small></div> 
      </div> 
      <action-button class="chevron" id="{{file['file-path']}}/{{file['file-name']}}"></action-button> 
     </li> 

    </ul> 

的指令，不工作的element.bind（）（下面的代碼） 和我怎麼只顯示其在列表中的元素之一。

myapp.directive('action-button',function(){ 
return { 
    restrict: 'E', 
    template: { 

    }, 
    link: function(scope,element,attrs){ 
     // This populates the options mene, Bind onclick event 
     element.bind("click",function(){ 
      // Append the options to it. 
      var str = ''; 
      str += "<div class=\"options-box\">" ; 
      str += "<ul class=\"options-inner\">" ; 
      str += "<li class=\"options-item\">" ; 
      str += "<a href=\"#\" ng-click = \"\">" ; 
      str += "<img class=\"options-img\" src=\"images/share_file.png\">" ; 
      str += "<div>Share</div>" ; 
      str += "</a>" ; 
      str += "</li>" ; 
      str += "</ul></div>"; 
     element.replaceWith(str); 
     } 
     ) 

     } 
    } 
}) 

編輯：我可以修復不工作的問題，我感到困惑的是如何使它只顯示一個圖標集。 編輯：固定錯字

Answer 1

首先，您w螞蟻使用模板而不是link來連接HTML。包括一個模板，看起來是這樣的：

<div class="chevron" ng-click="toggle()"></div> 
<div class="content" ng-if="showContent"> 
    <div class="options-box"> 
    etc... 
</div> 

的ng-if指令將只包括該DIV的DOM如果showContent是真實的。這與ng-hide和ng-show不同，它只是隱藏/顯示內容。

接下來，你需要一個控制器在你的指令來定義toggle()和showContent

這將處理單個指令，但它不會傳達給其他指令。

要做到這一點，你有幾個選擇。

一種選擇是使用$scope.$broadcast和$scope.$on廣播/接收消息。一條指令可以告訴所有其他人在隱藏之前隱藏它們。這與在展示個人之前使用$('.icon-set').hide()類似。

另一種選擇是創建一個名爲action-buttons負責添加action-button孩子家長指令。它在其控制器中有一個名爲hideAll()的功能，子指令將會是require: '^action-buttons'。這可以讓父控制器傳遞到鏈接功能：link: function(scope, element, attrs, ActionButtonsCtrl，您可以從子網中調用hideAll()。

你也可以混淆繼承範圍，但我建議不要這種方法。

祝你好運， 布賴恩

Answer 2

事實上，你正在使用angularjs，就像你正在使用jquery。 這不是最好的方法，你不應該自己修改dom，而是使用模板。

爲了解決你的問題，你應該將你的STR HTML代碼的指令模板：

template: '<div class=...>' 

然後添加一個NG隱藏屬性您<div class=\"options-box\">元素這樣的：

<div class=\"options-box\" ng-hide='showOption()'> 

在您需要定義showOption過程的範圍：

scope: { 
    showOption = function() { return ... } 
}