カスタムディレクティブによって返された要素のng-clickでDivが表示されない

Question

テーブルhtmlが正常に返されるディレクティブを作成しました。列の1つはアンカーリンク<td><a ng-click="showLogDiv()">Show Modified Data</a></td>で、その行に属する追加のデータを含むdivを表示したいが、それは表示されません。

//logdetails.html - コントローラには私の指示のtemplateUrlのproprerty

<div> 
    <table class="table table-hover table-responsive"> 
     <thead class="table-thead"> 
      <tr style="background-color:#56a7d6"> 

       <th>AccessLogId</th> 
       <th>EntityName</th> 
       <th>EntityId</th> 
       <th>RequestType</th> 
       <th>Modified Data</th> 
       <th>Creation Date</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="value in viewData.logdata"> 
       <td>{{value.AccessLogId}}</td> 
       <td>{{value.EntityName}}</td> 
       <td>{{value.EntityId}}</td> 
       <td>{{value.RequestType}}</td> 
       <!--<td><a ng-click="showLogDetails({{value.ModifiedData| json}})">Show Modified Data</a></td>--> 
       <td><a ng-click="showLogDiv()">Show Modified Data</a></td> 
       <td>{{value.CreatedDate | date:'medium'}}</td> 
      </tr> 

     </tbody> 
    </table> 
    <!--<div ng-show="divShow">Hello</div> I want to show {{value.ModifiedData| json}} contents here but even hardcoded Hello value not shown --> 
    <div ng-show="divShow">Hello</div> 
</div> 

私は/ショーにの一部を非表示にする方法

$scope.divShow = false; 
     $scope.showLogDiv = function() { 
      alert($scope.divShow); 
      $scope.divShow = true; 
      alert($scope.divShow); 
     }; 

マイディレクティブ

.directive("myActivityLogs", function() { 

     return { 
      restrict: 'E', 
      replace: 'true', 
      //template: '<div></div>', 
      //template: '<b>{{viewData.logdata[1].ModifiedData}}</b>' 
      templateUrl: 'app/modules/appScreen/logdetails.html' 
      //scope: { 

      // logsData:'=' 
      //}, 
      //link: function (scope, element, attrs) { 
      //link: function() { 

      // alert(viewData.logdata); 
      //} 
     }; 
    }); 

を持っていますhtmlはディレクティブによって返され、またデータをその部分にどのようにバインドすることができますか？ 私はangularjsを初めて使っていますが、今は何も意味がありませんので、間違ったことをやっているかもしれないので、非常に役立つと詳しく説明してください。

Answer 1

これを行う1つの方法は、ディレクティブコントローラを使用することです。

.directive("myDirective", function() { 
    return { 
     restrict: 'E', 
     replace: 'true', 
     templateUrl: './logdetails.html', 
     scope: { 
     viewData: '=' 
     }, 
     controller: function($scope) { 

     $scope.divShow = false; 

     this.showLogDiv = function() { 
      $scope.divShow = true; 
     }; 

     }, 
     controllerAs: 'ctrl' 
    }; 
    }) 

そして、それは、コントローラを使用するように、以下のようにテンプレートのHTMLを変更します：私は<a href ng-click="ctrl.showLogDiv()">を使用しました

<div> 
    <table class="table table-hover table-responsive"> 
    <thead class="table-thead"> 
     <tr style="background-color:#56a7d6"> 
     <th>AccessLogId</th> 
     <th>EntityName</th> 
     <th>EntityId</th> 
     <th>RequestType</th> 
     <th>Modified Data</th> 
     <th>Creation Date</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="value in viewData.logdata"> 
     <td>{{value.AccessLogId}}</td> 
     <td>{{value.EntityName}}</td> 
     <td>{{value.EntityId}}</td> 
     <td>{{value.RequestType}}</td> 
     <td><a href ng-click="ctrl.showLogDiv()">Show Modified Data</a></td> 
     <td>{{value.CreatedDate | date:'medium'}}</td> 
     </tr> 
    </tbody> 
    </table> 
    <div ng-show="divShow">Hello</div> 
</div> 

お知らせあなたはこのようなあなたのディレクティブを変更することができます。詳細はthis working plunkerを参照してください。