部門沒有顯示在自定義指令返回的元素ng-click

我已經創建了一個指令，其中表html成功返回。其中一列是錨鏈接<td><a ng-click="showLogDiv()">Show Modified Data</a></td>在其點擊我想顯示一個包含進一步數據屬於該行，但它不顯示。部門沒有顯示在自定義指令返回的元素ng-click

//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的新手，現在沒有任何意義，所以也許我做錯了事情，所以請詳細解釋它會非常有幫助。

來源

2016-12-17 Mudassir Hasan

做到這一點的一種方法是使用指令控制器。你可以改變你的指令是這樣的：

.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瞭解更多。

來源

2016-12-17 06:59:24 31piy

部門沒有顯示在自定義指令返回的元素ng-click

回答

相關問題