如何制作angularjs表指令

时间:2016-05-29 05:18:36

标签: javascript angularjs angularjs-directive

表的内容由ajax加载,我想显示加载这样的内容。如何将这两个ng-show转换为指令

<table>
    <tr>
        <th>aaa</th>
        <th>bbb</th>
        <th>ccc</th>
    </tr>
    <tr ng-show="isLoading">Loading...</tr>
    <tr ng-show="!isLoading" ng-repeat="log in logs">
        <td>{{log.aaa}}</td>
        <td>{{log.bbb}}</td>
        <td>{{log.ccc}}</td>
    </tr>
</table>

1 个答案:

答案 0 :(得分:1)

tableDirective

angular.module('app', [])
  .directive('tableDirective', function() {
    return {
      restrict: 'E',
      scope: {
        isLoading: '=',
        logs: '='
      },
      templateUrl: 'table.html'
    }
});

table.html

<table>
    <tr>
        <th>aaa</th>
        <th>bbb</th>
        <th>ccc</th>
    </tr>
    <tr ng-show="isLoading">Loading...</tr>
    <tr ng-show="!isLoading" ng-repeat="log in logs">
        <td>{{log.aaa}}</td>
        <td>{{log.bbb}}</td>
        <td>{{log.ccc}}</td>
    </tr>
</table>

view

<table-directive is-loading="isLoading" logs="logs"></table-directive>
来自您的控制器的

isLoadinglogs