2016-08-19 2 views
1

私のポップオーバーでクリック可能なテーブルを表示し、行の1つがクリックされたときに関数を呼び出したいとします。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:私のHTMLは次のようになります VARアプリ= angular.module( 'plunker'、[]);

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(); 
     }); 
    } 
    } 
}); 

Demo here

コードがこの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を使用しています。

関連する問題