Question

我已经创建了一个指令，其中成功返回了表格html。其中一列是锚链接<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

执行此操作的一种方法是使用指令控制器。您可以像这样更改指令：

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

请注意，我已使用<a href ng-click="ctrl.showLogDiv()">。您可以参考this working plunker了解更多信息。

Div不显示自定义指令返回的元素的ng-click

1 个答案: