Angularjs : 지시문 컨트롤러를 사용하여 ng-repeat를 처리하는 방법은 무엇입니까?

3 각형 띠를 사용하여 3 탭 패널을 표시하고 있습니다. 내 tabbed-Panel 지시어로 각진 스트랩 bs-tabs 지시문을 감 쌉니다. 나는 그렇게하기 위해 앞으로는 내 지시어로 전체 탭 패널을 움직일 수 있습니다. 그것은 잘 표시됩니다. 내가 알 수없는 것은 내 지시어로 탭 (클릭 반복 개체)의 클릭을 처리하는 방법입니다. 내 지시문 안에 컨트롤러가 있는데 탭 데이터를 표시하는 데 사용하지만 탭 클릭 (onTabClick)을 처리하는 방법을 알아낼 수 없습니다 ... 올바른 방법이며 링크를 사용해야합니까? (내가 아래에 주석으로 달았습니다)?Angularjs : 지시문 컨트롤러를 사용하여 ng-repeat를 처리하는 방법은 무엇입니까?

HTML :

<!DOCTYPE html> 
<html> 
    <head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    </head> 
    <body> 
    <tabbed-Panel class="bottomTabPanel"> 
     <div data-fade="1" ngModel="activeTab" bs-Tabs> 
     <div ng-repeat="tab in tabs" data-title="{{tab.title}}"> 
      <p ng-click="onTabClick(tab)">{{tab.content}}</p> 
     </div> 
     </div> 
    </tabbed-Panel> 
    </body> 
</html>

DIRECTIVE :

angular.module('directives', ['opsimut','$strap.directives']) 
    .directive('tabbedPanel',function() { 
    return { 
     restrict:"E", 

     controller: function($scope) {  
     $scope.tabs = [ 
      {title:'Question 1', content: 'Question 1 content here'}, 
      {title:'Question 2', content: 'Question 2 content here'}, 
      {title:'Indication', content: 'Indication content here'} 
     ]; 

     $scope.tabs.activeTab = 2; 

     $scope.onTabClick = function(tab) { 
      debugger; 
     }        
     } 
    }; 
});

출처

2013-05-28 Mike6679

나에게 잘 어울립니다. [여기에 귀하의 코드가 있습니다 plunk] (http://plunker.co/edit/iOWOMOTNqwQ88IjTO1Nd?p=preview) – rGil

@ rGil 귀하의 plunk에 각진 스트랩 탭이 없습니다. 그게 내 클릭 이벤트를 일으키는 원인이라고 생각하고 있습니다. 가로 채기 ... 나는 그것이 xmltechgeek이 아래를 참고하고있는 것이라고 생각한다. – Mike6679

일어나고있는 것으로 보인다 우선 당신이 각 스트랩에 필요한 부트 스트랩 및 JQuery와 링크가없는 것입니다.

앵글 스트랩은 부트 스트랩 자바 스크립트를 사용하도록 설계되었으며 주위에 이벤트 코드를 작성하여 부트 스트랩 호출을 각도 방식으로 트리거합니다. 부트 스트랩 j와 jquery j를 모두 포함해야하는 각형 스트랩 코드의 일부 지점을 실행하는 것처럼 보입니다.

<!DOCTYPE html> 

<html> 

    <head> 
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet"> 
    <link href="//mgcrea.github.com/angular-strap/css/prettify.css" rel="stylesheet"> 

    <!-- required libraries --> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> 
    <script src="//mgcrea.github.com/angular-strap/js/angular-strap.js"></script> 

    <script src="script.js"></script> 
    </head> 

    <body ng-app="directives"> 

    <tabbed-Panel class="bottomTabPanel"> 
     <div data-fade="1" ng-model="tabs.activeTab" bs-Tabs> 
     <div ng-repeat="tab in tabs" data-title="{{tab.title}}"> 
      <p>{{tab.content}}</p> 
     </div> 
     </div> 
     <pre> 
     {{tabActivations | json}} 
     </pre> 
    </tabbed-Panel> 
    </body> 

</html>

그리고 스크립트 파일 :

angular.module('directives', ['$strap.directives']) 
    .directive('tabbedPanel',function() { 
    return { 
     restrict:"E", 

     controller: function($scope) {  
     $scope.tabs = [ 
      {title:'Question 1', content: 'Question 1 content here'}, 
      {title:'Question 2', content: 'Question 2 content here'}, 
      {title:'Indication', content: 'Indication content here'} 
     ]; 

     $scope.tabs.activeTab = 1; 

     $scope.tabActivations = []; 

     $scope.$watch('tabs.activeTab', function(){ 
      $scope.tabActivations.push('watch activated for tab ' + $scope.tabs.activeTab); 
     }); 
     } 
    }; 
});

작업이 http://plnkr.co/edit/4hss3FHKMSc8st56BRTJ?p=preview

편집에서이 버전 쿵하는 소리 : 내가 제대로에서 탭 변화와 탭의 변화를 볼 수있는 내 plnkr을 수정 한 tabs.activeTab. 또한 불필요한 ng-click (아래 설명 참조)을 제거하고 모델 호출을 수정했습니다.

각형 스트랩 bsTabs 지시문을 작성한 방법으로 생성 된 a 또는 부모 li 태그에 클릭 이벤트를 전달할 수 없습니다 (코드 위치는 https://github.com/mgcrea/angular-strap/blob/master/src/directives/tab.js, 라인 9 및 10). 대신 탭 활성화에 대한 변경 사항을 감시하고 거기에서 원하는 기능을 트리거 할 수 있습니다.

출처

2013-05-29 02:05:25

흠, 좋아, 그럼 어떻게하면 클릭 이벤트를 얻을 수 있습니까? – Mike6679

그것은 확실히 작동하며 좋은 해결책입니다. 내 사용자 정의 지시문에 대한 UI 부트 스트랩으로 전환 할 예정이지만 생각합니다. 이 방법은 jquery를 포함 할 필요가 없으며 기존 컨트롤러를 사용하여 클릭 이벤트를 처리 할 수 있습니다 (탭 컨텐트를 한 줄에 감싼 후). 참조 : https://github.com/angular-ui/bootstrap/issues/179 – Mike6679

예, 나는 두 사람 사이에서왔다 갔다했지만 앵글 팀의 조직을 많이 좋아하므로 경향이 있습니다. 그런 식으로 기대다. 앵글 스트랩에는 멋진 UI 모양과 느낌이있다. –

Angularjs : 지시문 컨트롤러를 사용하여 ng-repeat를 처리하는 방법은 무엇입니까?

답변

관련 문제