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

Question

嗨，我是 AngularJS 的新手，如果这是一个简单的问题，请原谅我。我有一个看起来像这样的简单指令：

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

理想情况下，我希望使用 ng-repeat 生成使用 ng-transclude 插入到我的 div 中的内容。所以我有一个像这样的 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'}];
}]);

Answer 1

您的控制器和指令之间可能存在范围可见性问题。

看看[this 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']);

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

AngularJS : ng-repeat in Directive ng-transclude

javascript

angularjs

transclusion

angularjs-directive

angularjs-ng-repeat