0

ディレクティブ内でディレクティブを繰り返そうとしているので、各ディレクティブにテンプレートを設定できますが、ng-transcludeを使用すると最初のエントリしか表示できないという問題があります

これが私がこれまでに行ったことです

<div ng-app="TestApp">
    <div ng-controller="TestCtrl">
        <test-collector>
            <test-data xx-value="Mouse" xx-href="https://fb.com" />
            <test-data xx-value="Keyboard" xx-href="https://goo.gl" />
        </test-collector>        
    </div>
</div>

そしてコントローラーに

var app = angular.module('TestApp', []);

app.controller('TestCtrl', ['$scope', function($scope){

}]);

app.directive("testCollector", function () {
    return {
        restrict: "E",
        scope: {},
        transclude: true,  
        replace: true,
        controller: function($scope) {

        },
        template: '<div>' +
                        '<div ng-transclude></div>' +
                   '</div>'
    }
});

app.directive("testData", function(){
    return {
        restrict: "E",
        require: '^testCollector',
        transclude: true,
        replace: true,
        scope: {
            xxValue: '@',
            xxHref: "@"
        },
        template: '<a href="{{xxHref}}">{{xxValue}}</a>'
    }
});

私はマウスだけを手に入れます

私は実際にそれを見るためにフィドルを用意しましたここをクリック

助けてください。

前もって感謝します

4

1 に答える 1

1

<test-data>ディレクティブタグをいじっています。を閉じていませんtest-data。test-dataas のような要素に自己終了タグを付けました<test-data />。

HTML

<div ng-app="TestApp">
    <div ng-controller="TestCtrl">
        <test-collector>
            <test-data xx-value="Mouse" xx-href="https://fb.com"></test-data>
            <test-data xx-value="Keyboard" xx-href="https://goo.gl"></test-data>
        </test-collector>        
    </div>
</div>

働くフィドル

于 2015-01-18T18:52:23.110 に答える