Question

嗨，我是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'}];
}]);

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

1 个答案: