在angularjs中动态加载Jquery选项卡

我想从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>

{{hodnm.username}

它似乎没有按我想要的方式工作。喜欢有什么办法可以实现吗

---

以下是您的代码没有问题，但需要在

指令中作为注入器应用
$timeout
，如下所示：

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();
        });
    }
    };
})

另外，仅将数字用作DOM
id属性
值不是一个好做法。这就是为什么我在你的标记部分也做了一些改动。我加了一个前缀“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>





{{hodnm.username}