1

AngularJS ホームページの例では、タブ用とペイン用の 2 つのディレクティブを使用してタブを作成しています。次のように、単一のテンプレートと単一のディレクティブを作成することは可能ですか?

HTML:

<div ng-app="components">
<tabs objects="someObjects" labelprop="name" shouldbe="the value of object.name"></tabs>
<tabs objects="someObjects" labelprop="id" shouldbe="the value of object.id"></tabs>
</div>

JS:

angular.module('components', []).
directive('tabs', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {objects: '=', labelprop: '@', shouldbe: '@'},
        controller: function($scope, $element) {
            $scope.someObjects = [
                {name: "One", id: 1, data: 'foo'},
                {name: "Two", id: 2, data: 'bar'},
                {name: "There", id: 3, data: 'foobar'}
                ]
        },
        template:
            '<div class="tabbable">' +
                '<ul class="nav nav-tabs">' +
                    '<li ng-repeat="object in someObjects">' +
                        '<p>How do I use "labelprop" to get {{shouldbe}}</p>' +
                    '</li>' +
                '</ul>' +
            '</div>'
    }
})

(私の質問を説明するこのフィドルを参照してください: http://jsfiddle.net/2GXs5/3/ )

私がこれまでに理解したことからng-repeat、それは独自のディレクティブであるため、オフになり、独自のことを行いobject、スコープ内のプロパティにアクセスできません。たとえば、ディレクティブのリンク関数でこれを行いたい場合:scope.label = scope.object['scope.labelprop']

また、私はまだ補間、トランスクルージョンなどに頭を悩ませようとしているので、解決策にはそれが含まれる可能性があります。

4

1 に答える 1

0

デモで問題を解決するには、テンプレート内の繰り返しアイテムとディレクティブ スコープの両方にアクセスできます

 <p>{{labelprop}} is  {{object[labelprop]}}</p>

引用符で囲まれていない式内で関連するフィルター以外のものは、その変数が現在のスコープ内にある限り、変数として扱われます

デモ: http://jsfiddle.net/2GXs5/4/

于 2013-03-29T17:32:43.893 に答える