在angularjs中动态加载Jquery选项卡

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在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>

它似乎没有按照我想要的方式工作。像here。有没有办法实现它?

这是jsfiddle

答案

您的代码没问题,但需要在$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选项卡的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS 指令在使用 $.get 加载动态内容后编译

使用 angularjs 动态创建控件

AngularJS项目中如何实现按需加载js文件?

AngularJS + JQuery:如何在 angularjs 中获取动态内容

以及ajax以及angularjs 动态模板加载并进行渲染

angularjs select通过动态加载option有空白项的处理方法-