Question

我试图为我的应用程序创建一个表指令，我想让它非常灵活，所以我可以随处使用它。问题是，我不知道如何访问我试图通过的字符串中的数据，也许这不是最好的方法......任何建议？这是html和指令的代码：

'use strict';

angular.module("private.directives")

    .directive('tableDirective', [
                                           function(){

        return {

            restrict : 'E',
            templateUrl: 'resources/js/private/views/utils/table/table.html',
            scope : {
                selected: '=',
                page : '=',
                header : '=',
                properties : '='
            },
            controller : ['$scope', function ($scope) {

            }],
            controllerAs : 'cntrl',
            bindToController: true
        }
}]);

表格html：

<div class="pt-1">      
            <table class="table table-hover">
              <thead>
                <tr ng-repeat="header in headers">
                  <th translate>{{header | uppercase}}</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="data in cntrl.page.data" ng-class-odd="'striped'">
                  <td>{{data.[cntrl.properties[$index]] | uppercase}}</td>
                </tr>
              </tbody>
            </table>

            <!-- TODO -->
            <div class="row" ng-show="cntrl.page.totalResults > 0">
                <div class="col-xs-12">
                    <nav class="float-xs-right" aria-label="Page navigation">
                      <ul class="pagination">
                        <li class="page-item">
                          <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                            <span class="sr-only" translate>paginacion.previous</span>
                          </a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                          <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                            <span class="sr-only" translate>paginacion.next</span>
                          </a>
                        </li>
                      </ul>
                    </nav>
                </div>
            </div>
        </div>

HTML所在的位置：

   <table-directive 
        page="cntrl.ingredients" 
        headers="['#', 'table.name', 'tabla.brand']"
        properties="['ingredientId','description','brandDescription']">
    </table-directive>

＆＃34; cntrl.ingredients＆＃34;中的数据是一个具有以下内容的对象：

{
   data : [],
   currentPage : null,
   pageSize : null,
   totalResults : null,
   sortDirection : null,
   orderBy : null
}

＆＃34;数据＆＃34;数组将有不同的对象，具体取决于我使用的表格。我知道错误是在表格html中，当我遍历cntrl.page.data时，我不知道如何获得我想要显示的值...＆＃34;数据。[cntrl.properties [$指数]]＆＃34;似乎不起作用。

提前致谢!!

Answer 1

您的想法是有效的，如果您完全按照您编码的方式发布，那么这只是因为存在一些拼写错误和轻微错误。

directive：

您期待header，在调用指令时，您使用了headers
一般来说，如果指令是数据的最终消费者，那么就不要=进行双向绑定，而是使用<概念。这样就不会修改原始数据。我这么说是因为你在指令控制器中没有任何内容

table.html

重复header in cntrl.headers而不是header in headers。您的标题信息绑定到cntrl而不是直接绑定到范围。
我相信你想要的是th而不是tr

用于页面数据：

 <tr ng-repeat="data in cntrl.page.data">
   <td ng-repeat="(key, value) in data" ng-class-odd="'striped'">{{value | uppercase}}</td>
 </tr>

喝彩！

---编辑---

我的坏。对于页面数据，您传递属性以确保订单，对吧？ td ng-repeat应该在属性和调用数据[property]

--- EDIT2 ---

应该看起来像

<tr ng-repeat="data in cntrl.page.data">
  <td ng-repeat="property in cntrl.properties">
    {{ data[property] }}
  </td>
</tr>

Angularjs使用字符串访问控制器值

1 个答案: