AngularJS: nest directive in ng-repeat for using smart-table with dynamic table fields

百般思念 提交于 2019-12-24 18:35:02

问题


I'm trying to use angular-smart-table for grid in my new AngularJS app. According to the document, to sort a column, I should use the st-sort directive like bellow:

<th st-sort="firstName">first name</th>
<th st-sort="lastName">last name</th>

However, I'm trying to re-use the piece of code for not only one table, so I don't know the table field names in advance until the run-time. I'm doing something like bellow:

<script type="text/ng-template" id="content1">
  <div ng-repeat="table in $ctrl.tables">
    <h2>{{table._tableName}}</h2>
    <table st-table="table._data" class="table table-striped">
      <tr>
        <th ng-repeat="fieldName in table._fieldNames" st-sort="{{fieldName}}">{{fieldName}}</th>
      </tr>
      <tr ng-repeat="data in table._data">
        <td ng-repeat="fieldName in table._fieldNames">{{$ctrl.formatCell(table, data, fieldName)}}</td>
      </tr>
    </table>
  </div>
</script>

And this cannot work (cannot sort, other functions OK). I tried bellow it does not work, seems the st-sort has to be in the <th> tag.

<th ng-repeat="fieldName in table._fieldNames"><span st-sort="{{fieldName}}">{{fieldName}}</span></th>

And bellow does not work as well:

<tr>
  <span ng-repeat="fieldName in table._fieldNames">
    <th st-sort="{{fieldName}}">{{fieldName}}</th>
  </span>
</tr>

Today I tried to develop a directive and use it in the comment by setting restrict to "M" to solve the above. Then I got a new problem: I'm using UI-Router in this app and I cannot get the table contents in my directive, because UI-Router states have isolated scopes and it only supports controllers but does not support directives. The author may think supporting directives is not necessary (yes in most cases, but this kind of assumptions are always dangerous).

I'm Trying two possible ways: 1., put the field names to the session/local storage for sharing as a work-around; 2., abandon UI-Router. Appreciate anyone providing a better solution.

来源:https://stackoverflow.com/questions/46845845/angularjs-nest-directive-in-ng-repeat-for-using-smart-table-with-dynamic-table

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!