2016-08-19 2 views
1

내 popover에서 클릭 가능한 테이블을 표시하고 행 중 하나가 클릭 될 때 함수를 호출하려고합니다. 내 HTML은 다음과 같습니다ng-click이 부트 스트랩 팝 오버 콘텐츠에서 작동하지 않습니다.

<a popover id="showDays" 
    type="button" 
    class="btn btn-success btn-xs pull-left" 
    data-toggle="popover" 
    data-placement="right" 
    data-html="true" 
    title="Popover title" 
    data-content= 
    '<table class="table table-condensed"> 
     <tbody> 
     <tr ng-repeat="d in days" ng-click="show(111)"> 
      <td ng-bind="d"></td> 
      <td ng-bind="x"></td> 
     </tr> 
     </tbody> 
    </table>'> 
     <i class="fa fa-clock-o fa-lg">Click me</i> 
</a> 

그리고 내 script.js : var에 응용 = angular.module ('plunker', []를);

Demo here

코드

app.controller('MainCtrl', function($scope) { 
    $scope.days = [ 
    'Sunday', 
    'Monday', 
    ]; 
    $scope.show = function(x) { 
    console.log("show called with " + x); 
    $scope.x = x; 
    } 
}).directive('popover', function($compile, $timeout){ 
    return { 
    restrict: 'A', 
    link:function(scope, el, attrs){ 
     var content = attrs.content; 
     var elm = angular.element('<div />'); 
     elm.append(attrs.content); 
     $compile(elm)(scope); 
     $timeout(function() { 
     el.removeAttr('popover').attr('data-content',elm.html()); 
     el.popover(); 
     }); 
    } 
    } 
}); 

는 대답 자체가 잘 작동이 question에서 복사,하지만 내 show 함수가 호출되지 않습니다. 왜 그런가?

+0

"이 코드가 작동하지 않는 이유"로 표기되었습니다. –

+0

@AlexandreMartin 그 의미는 무엇입니까? 어떻게 내가이 질문을해야합니까? – swang

+0

'ui-bootstrap'의'popover' 엘리먼트를 사용하지 않았습니까 –

답변

1

나는 지시어는 scope와 기능 show를 결합하는 데 실패 어떤 이유로, 문제를 찾았지만 days 성공했습니다, 나는 내가 link 기능이 작성되는 방식을 변경하는 경우, ng-, 몇 가지 실험을했다 클릭은 작동하지만 ng-repeat는 작동하지 않습니다. 즉,이 경우에는 days을 바인딩하지 못했습니다.

업데이트 DEMO 대신 나를 위해 데이터 컨텐츠 속성

<script type="text/ng-template" id="popover-content"> 
    <table class="table table-condensed"> 
     <tbody> 
     <tr ng-repeat="d in days" role="button" ng-click="show(111)"> 
      <td ng-bind="d"></td> 
      <td ng-bind="x"></td> 
     </tr> 
     </tbody> 
    </table> 
    </script> 

지금 NG 반복 및 NG-클릭 모두 잘 작동의 templateUrl를 사용합니다.

관련 문제