Print Page - Looking for more Angular directives

Here is what I've got so far for tabs:

Code:

charts.directive('easyuiTab', function () {
    return {
        restrict: 'AE',
        link: function (scope, elem, attrs) {
            $('#tt').tabs({
                border: true,
                onSelect: function (title) {
                    alert(title + ' is selected');
                }
            });
            $('#tt').tabs('add', {
                title: 'New Tab',
                content: 'Tab Body',
                closable: true,
                tools: [{
                    iconCls: 'icon-mini-refresh',
                    handler: function () {
                        alert('refresh');
                    }
                }]
            });
        }
    }
});

And markup:

Code:

<div id="tt" easyui-tab class="easyui-tabs" style="width:100%;height:250px">        
    </div>

I am getting a large empty box across my page. The Console shows the following error:

Error: no such method 'add' for tabs widget instance
at Function.m.extend.error (http://www.jeasyui.com/easyui/jquery.min.js:2:1809)
at HTMLDivElement.<anonymous> (http://code.jquery.com/ui/1.10.1/jquery-ui.min.js:5:6141)
at Function.m.extend.each (http://www.jeasyui.com/easyui/jquery.min.js:2:2975)
at m.fn.m.each (http://www.jeasyui.com/easyui/jquery.min.js:2:835)
at e.widget.bridge.e.fn.(anonymous function) [as tabs] (http://code.jquery.com/ui/1.10.1/jquery-ui.min.js:5:5937)
at link (http://goldin:7060/prismHTML/charts/app/controllers/dygraph.js:99:22)
at B (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js:49:451)
at h (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js:43:24)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js:42:180
at compile (http://cdn.jsdelivr.net/angular.ui-router/0.2.15/angular-ui-router.js:4026:9) <div id="tt" easyui-tab="" class="easyui-tabs ng-scope ui-tabs ui-widget ui-widget-content ui-corner-all" style="width:100%;height:250px">

Please help.

Thanks

Seems like I am able to build a tab control using a directive. Now is a question. Since I am creating tabs in the code how can I add a content to it? What I want is to add datagrids to each tab.
Can I do that? All these datagrids are created in code using directives, so the following is not working for me:
$(elem).tabs('add', {
title: 'Alarm Category',
content: '<div><table a-directive ng-model="someData"></table></div>',
closable: false,
selected: true
});

Thanks

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: zolotoy on July 06, 2015, 04:22:10 PM