Looking for more Angular directives

[zolotoy]

Do you have any guidelines for creating Angular directives for various  controls? For example, tabs?

Thanks

[zolotoy]

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

[stworthy]

Please refer to http://jsfiddle.net/adLmzs7a/

[zolotoy]

It  works as long as a controller is in the html file.

[zolotoy]

But I need it to work the same way a datagrid works when a controller is a separate file.

[zolotoy]

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

[stworthy]

Please refer to this example http://jsfiddle.net/adLmzs7a/1/