Javascript 自定义指令返回的元素的ng click上未显示Div

我已经创建了一个指令，其中一个表html被成功返回。其中一列是锚定链接

Show Modified Data

，单击该列可以显示包含属于该行的更多数据的div，但该div不显示

//logdetails.html-我的指令的templateUrl属性

<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>

.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);
            //}
        };
    });

我的指令

<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>

.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);
            //}
        };
    });

指令（“myActivityLogs”，函数（）{ 返回{ 限制：'E'， 替换为：“true”， //模板：“”， //模板：“{viewData.logdata[1].ModifiedData}” templateUrl:'app/modules/appScreen/logdetails.html' //范围：{ //logsData:“=” //}, //链接：函数（范围、元素、属性）{ //链接：函数（）{ //警报（viewData.logdata）； //} }; }); 如何隐藏/显示指令返回的html的一部分，以及如何将数据绑定到该部分？

---

我是angularjs的新手，现在没有什么意义，所以可能我做的事情不对，所以请详细解释这将非常有帮助。

一种方法是使用指令控制器。您可以这样更改指令：

.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，使其使用控制器：

<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>

附属物
实体名字
实体ID
请求类型
修改数据
创建日期
{{value.AccessLogId}
{{value.EntityName}
{{value.EntityId}
{{value.RequestType}
{{value.CreatedDate}日期：'medium'}
你好

请注意，我使用

了解更多信息