在 angularjs 中动态加载 Jquery 选项卡

Question

我想从angularjs中的数组加载选项卡。

$scope.hods =
[
{ leader_id: 1000321, staff_id: 1000321, longname: "Ooi Kok Hong", username: "ANDREW", team_role: "HOD", importance: "1", active:true  },
{ leader_id: 1000321, staff_id: 1000322, longname: "See Chin Joo", username: "CJSEE", team_role: "HOD", importance: "1", active:false }
];

我为 jquery 选项卡创建了一个指令：

angular.module('quartzScoreboard').directive('hboTabs', function() {
return {
restrict: 'A',
link: function(scope, elm, attrs) {
var jqueryElm = $(elm[0]);
$(jqueryElm).tabs()
}
};
});

然后尝试以html格式打印它：

<div data-hbo-tabs id="tabs">
<ul>
<li ng-repeat="hod in hods"><a href="#{{hod.staff_id}}">{{hod.longname}}</a></li>
</ul>
<div ng-repeat="hodnm in hods" id="{{hodnm.staff_id}}">
<p >{{hodnm.username}}</p>
</div>
</div>

它似乎没有按照我想要的方式工作。就像这里。有什么办法可以实现吗？

这是jsfiddle

Answer 1

您的代码还可以，但需要将$timeout作为directive中的注入器应用，如下所示：

var app=angular.module('myApp', [])
.controller('myCtrl', function ($scope) {
$scope.hods =
[
{ leader_id: 1000321, staff_id: 1000321, longname: "Ooi Kok Hong", username: "ANDREW", team_role: "HOD", importance: "1", active:true  },
{ leader_id: 1000321, staff_id: 1000322, longname: "See Chin Joo", username: "CJSEE", team_role: "HOD", importance: "1", active:false }
];
})
.directive('hboTabs', function($timeout) {
return {
restrict: 'A',
link: function(scope, elm, attrs) {
$timeout(function () {
var jqueryElm = $(elm[0]);
$(elm).tabs();
});
}
};
})

此外，仅使用数字作为 DOMid attribute值不是一个好的做法。所以这就是为什么我也在你的标记部分做了一些改变。我添加了一个前缀"a"：

<div ng-controller="myCtrl">
<div data-hbo-tabs id="tabs">
<ul>
<li ng-repeat="hod in hods"><a href="#a{{hod.staff_id}}">{{hod.longname}}</a></li>
</ul>
<div ng-repeat="hodnm in hods" id="a{{hodnm.staff_id}}">
<p>{{hodnm.username}}</p>
</div>
</div>
</div>