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>

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

这里是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值不是一个好习惯。因此，这就是为什么我在您的标记部分也做了一些改动的原因。我添加了前缀“ 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>

在angularjs中动态加载Jquery标签

1 个答案: