Загружать вкладки Jquery динамически в angularjs

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

Также используйте только число в качестве значения DOM id attribute - не очень хорошая практика.Поэтому я немного изменил и вашу разметку.Я добавил префикс «а»:

<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>