Angularjs:在指令中添加ng-repeat

时间:2013-08-29 08:05:46

标签: angularjs angularjs-directive angularjs-ng-repeat

我是angularjs的新手,并试图写一个指令。我的指令代码是

Directives.directive("roleTemplate", function(){
    return {
        restrict : 'EA',
        template : '<div class="box span6">'+
                        '<div class="box-header">'+
                            '<h2 class="custom"><i class="fa-icon-group" style="opacity:.7"></i><span class="break"></span>titile</h2>'+
                        '</div>'+
                        '<div class="box-content">'+
                            '<p><strong>As a team leader you are likely to...</strong></p>'+
                            '<ul>'+
                                '<li>test</li>'+
                            '</ul>'+
                        '</div>'+
                    '</div>',   
        replace : true,
        link : function(scope,element,attr){

        }
    };
});

,当我添加

时,它工作正常
<div role-template></div>

但是当我将ng-repeat添加到模板代码中时

<div class="box span6" ng-repeat = "ob in atWorkObjectsArray">

Firfox消息弹出说

A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.

Script: http://localhost:8080/tm-webapp/resources/lib/angular.js:4678

我的问题是这可能是ng-repeat的问题,我可以在模板中使用它吗?

UPDATA:

$scope.atWorkObjectsArray = [$scope.workEffectivenessObj,$scope.workTeamLeadObj];

WHERE

$scope.workEffectivenessObj = {"title":"Effectiveness", "array":userProperties.atWorkProblmSolving};

AND

$scope.workTeamLeadObj = {"title":"Team Lead", "array":userProperties.atWorkTeamLead};

atWorkProblmSolvingatWorkTeamLead是javascripts数组。

如果我在视图(html)中使用相同的模板代码,它可以正常工作。

1 个答案:

答案 0 :(得分:0)

如果没有atWorkObjectsArray,很难看出出现了什么问题。 但是你可以在指令中使用ng-repeats。这是我可以用作指南的简单示例。

    template: '<div> <div ng-repeat="d in data">{{d}}</div></div>'

http://jsfiddle.net/vhC7X/