簡體   English   中英

AngularJS:指令ng-transclude中的ng-repeat

[英]AngularJS : ng-repeat in Directive ng-transclude

嗨,我是AngularJS的新手,請原諒我,如果這是一個簡單的問題。 我有一個簡單的指令,看起來像這樣:

app.directive('myDirective', function() {
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        template: '<div ng-transclude></div>'
    };
});

我理想地喜歡插入到我的div中的內容,使用ng-repeat生成ng-transclude。 所以我有一個像這樣的HTML塊:

<my-directive>
    <div ng-repeat="item in data">{{item.name}}</div>
</my-directive>

我知道我的數據陣列正確地填充在我的控制器中,因為我可以在我的開發工具中看到請求並且我已經記錄了我的數據對象。 但是,我的頁面生成不正確,當我檢查頁面內容時,我最終得到的內容如下:

<my-directive>
    <!-- ngRepeat: item in data -->
</my-directive>

在ng-transclude中使用ng-repeat有什么問題嗎? 我搜索過但似乎無法找到答案。 謝謝!

編輯:

這是控制器:

app.controller('MyController', ['$scope', function($scope) {
    $scope.data = [{'name': 'Foobar'}];
}]);

您的控制器和指令之間可能存在一些范圍可見性問題。

看看[這個jsFiddle]。

var myModule = angular.module('ui.directives', []);
myModule.directive('myDirective', function() {
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        template: '<div ng-transclude></div>'
    };
});

myModule.controller('myController', function($scope){
    $scope.data = [
        {name: 'foo'},
        {name: 'bar'}
    ];
});

angular.module('myApp', ['ui.directives']);

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM