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

먼저 개미는 link 대신에 템플릿을 사용하여 HTML을 연결합니다. showContent에 해당하는 경우 ng-if 지시어 만 DOM이 DIV 포함됩니다

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

이 같은 형태의 템플릿을 포함합니다. 이는 콘텐츠를 단순히 숨기거나 표시하는 ng-hide 및 ng-show과 다릅니다.

다음, 당신은 toggle() 및 showContent

이 개별 지시어를 처리를 정의하기 위해 지시어에 컨트롤러를 필요로하지만, 다른 지시어와 통신하지 않습니다.

이렇게하려면 몇 가지 옵션이 있습니다.

하나의 옵션은 메시지를 브로드 캐스트/수신하기 위해 $scope.$broadcast 및 $scope.$on을 사용하는 것입니다. 하나의 지시문은 다른 모든 지시자가 자신을 표시하기 전에 숨기도록 지시 할 수 있습니다. 이는 개인을 보여주기 전에 $('.icon-set').hide()을 사용하는 것과 비슷합니다.

action-button 자식 추가를 담당하는 action-buttons이라는 상위 지시문을 만드는 것도 또 다른 옵션입니다. 컨트롤러에는 hideAll()이라는 함수가 있고 자식 지시문은 require: '^action-buttons'입니다. 이렇게하면 부모 컨트롤러가 자식에서 hideAll()으로 전화 할 수있는 link: function(scope, element, attrs, ActionButtonsCtrl 링크 함수로 전달됩니다.

또한 상속 된 범위를 사용할 수 있지만이 방법을 사용하지 않는 것이 좋습니다.

행운을 빌어 요, 이

Answer 2

실제로 Jquery로 작업하는 것처럼 angularjs로 작업하고 있습니다. 이것은 최선의 방법이 아니므로 dom을 직접 수정하지 말고 템플릿을 사용하십시오.

문제를 해결하기 위해, 당신은 지시 템플릿에 STR의 HTML 코드를 이동해야합니다 :

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

이 나서 NG 숨김 속성을 추가하여 <div class=\"options-box\"> 요소에 그런 :

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

에서 showOption 프로 시저를 정의하는 데 필요한 범위는 다음과 같습니다.

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