AngularJS和JQuery UI選項卡

我已經看過一些使用AngularJS的選項卡示例，但很少有關於使用AngularJS的JQueryUI選項卡，所以我嘗試創建兩個指令來創建選項卡容器和選項卡項目。AngularJS和JQuery UI選項卡

這裏是我創建的樣例代碼：http://jsfiddle.net/davidzapata/tvq6w1g9/2/

HTML

<div ng-app="biApp"> 
    <div ng-controller="MyCtrl"> 
     <h1>{{greeting}}</h1> 
     <jqueryuitabs> 
      <jqueryuitab id="tab1" title="Tab 1">Tab 1 content</jqueryuitab> 
      <jqueryuitab id="tab2" title="Tab 2">Tab 2 content</jqueryuitab> 
      <jqueryuitab id="tab3" title="Tab 3">Tab 3 content</jqueryuitab> 
     </jqueryuitabs> 
    </div> 
</div>

var appModule = angular.module('biApp', []); 

appModule.controller('MyCtrl', function($scope){ 
    $scope.greeting = 'Hi!'; 
}); 

appModule.directive('jqueryuitabs', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     template: '<div><ul><li ng-repeat="tab in tabs"><a href="#{{tab.id}}">{{tab.title}}</a></li></ul><ng-transclude></ng-transclude></div>', 
     controller: function($scope) { 
      console.log('jqueryuitabs Controller'); 
      $scope.tabs = []; 

      this.addTab = function(tab){ 
       console.log('Add Tab', tab); 
       $scope.tabs.push(tab); 
      } 
     }, 
     link: function(scope, elm, attrs) { 
      console.log('jqueryuitabs link'); 
      var jqueryElm = $(elm[0]); 
      $(jqueryElm).tabs(); 
     } 
    }; 
}); 

appModule.directive('jqueryuitab', function() { 
    return { 
     restrict: 'E', 
     require: '^jqueryuitabs', 
     transclude: true, 
     scope: { 
      id: "@", 
      title: "@" 
     }, 
     template: '<div id="{{id}}" ng-transclude></div>', 
     link: function (scope, element, attrs, tabsCtrl) { 
      console.log('Tab link'); 

      tabsCtrl.addTab(scope); 
     } 
    }; 
});

我從來沒有在jsfiddle.net創建代碼之前，但該代碼似乎加載了所需的庫。即使如此，控制器仍然工作，呈現「問候」模型，但標籤不起作用，甚至不會將內容轉化爲各個元素。

當然，我是一個新的使用AngularJS，但我還沒有想出如何解決這個問題。

謝謝你！

來源

2014-10-27 David Zapata

我認爲你會更好地檢查角ui：http://angular-ui.github.io/bootstrap/#/tabs – OneHoopyFrood 2014-10-27 23:32:50

使用上div的，ng-transclude在jqueryuitabs指令：

template: '<div><ul><li ng-repeat="tab in tabs"><a href="#{{tab.id}}">{{tab.title}}</a></li></ul><div ng-transclude></div></div>'

見jsfiddle。

來源

2014-10-27 23:19:55

這一個作品，但我必須使用$ timeout啓動選項卡。不知何故，如果沒有$超時，它就無法正常工作。 – 2014-10-30 00:00:11

這可能是DOM/jQuery尚未完成加載/處理？ – Kolban 2014-12-03 03:51:34

停止自定義實現並僅使用http://angular-ui.github.io/bootstrap/。它更有效率，你可以繼續專注於更重要的任務

來源

2014-10-28 07:55:46 Coldstar

這是一個很好的選擇，但我正在處理的網站不是我的，它們與jquery-ui「結婚」，所以對於這個特定情況，這不是一個選項。 – 2014-10-30 00:01:56

這不是一個答案，而是一個意見。我相信原始海報的問題是有價值的。 – Kolban 2014-12-03 03:47:47

AngularJS和JQuery UI選項卡

回答

相關問題