0

AngularJS のディレクティブに問題があります。

次の HTML コードがあります。

<div ng-controller="Controller">
<table>
    <thead>
    .......
    </thead>
    <tfoot>
    .......
    </tfoot>
    <tbody>
        <tr ng-repeat="values in Items.rows">
            <td ng-repeat="data in values">{{data}}</td>
        </tr>
    </tbody>
</table>
</div>

私の要素のコントローラー:

var MyApp = angular.module('MyApp', []);
Application.controller('Controller', ['$scope', '$filter', function($scope, $filter) {

// Some logic
$scope.Items = {

     head: ["id", "Name", "Age"],

     rows: [
             ["1", "Bob", "23"],
             ["2", "Sam", "23"],
             ["3", "Joe", "23"]
           ]
     };
           // Some other logic
    }
}

そして最後にディレクティブ:

Application.directive('Table', function() {
  return {
           restrict: 'E',
           replace: true,
           scope: {},
           templateUrl: 'Table.html'
         }
});

問題は HTML ページのレンダリングにあります。ページを表示しようとすると、データがテーブルに表示されません...修正方法はありますか?

4

3 に答える 3

0

あなたのディレクティブが特定のタグを Table.html に置き換えるだけの場合は、ng-includeたとえば次のように使用する必要があると思います。

意見：

<div ng-controller="Controller">
    <div ng-include="'Table.html'">
    </div>
</div>

Table.html:

<table>
    <thead>
    .......
    </thead>
    <tfoot>
    .......
    </tfoot>
    <tbody>
        <tr ng-repeat="values in Items.rows">
            <td ng-repeat="data in values">{{data}}</td>
        </tr>
    </tbody>
</table>

しかし、本当にディレクティブが必要な場合 (つまり、「リンク/コンパイル機能を使用して、テンプレートをロードするだけでなく何かをしたい場合」という意味です)、スコープがディレクティブでどのように機能するかを知っておく必要があります。最初に、scope: {}ディレクティブの新しい分離スコープを作成します。これは空です (したがって、Items変数は表示されません)。分離スコープを取り除くことができます (scope未設定のままにすることで)。

scope: {
    items: '&'
}

このディレクティブの新しい分離スコープを作成しますが、このスコープには、要素の属性にitems割り当てたものに設定される変数があります。itemstable

意見：

<div ng-controller="Controller">
    <generic-table items="Items"></generic-table>
</div>

Table.html:前と同じ。

genericTable古いシナリオではディレクティブであるため、ディレクティブの名前を任意の名前に変更する必要があることに注意してください。tableそれ自体を含むディレクティブを想像してみてください。それは良い考えではないと思います。

于 2013-10-01T07:54:58.260 に答える
0

Items はオブジェクトであるため、rows 配列を反復する必要があります。

<tbody>
        <tr ng-repeat="values in Items.rows">
            <td ng-repeat="data in values">{{data}}</td>
        </tr>
    </tbody>
于 2013-09-30T11:57:13.973 に答える