This is a migrated thread and some comments may be shown as answers.

Use AngularJS directive in tab content

3 Answers 246 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Duncan
Top achievements
Rank 1
Duncan asked on 19 Dec 2014, 03:34 PM
How do I get the test directive to render as a directive when tab3 or tabN are rendered?

The directive will in reality be more complex, this is a simplified example.

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>WithDataSource</title>
    <link href="~/Content/kendo/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="~/Content/kendo/styles/kendo.default.min.css" rel="stylesheet" />
 
    <script src="~/Scripts/kendo/js/jquery.min.js"></script>
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/kendo/js/kendo.all.min.js"></script>
</head>
<body>
 
    <div ng-controller="MainCtrl">
         
        <test></test>
 
        <div kendo-tab-strip="tabstrip2" k-options="tabStripOptions"></div>
        <p>
            <input type="button" ng-click="add()" value="add" />
            <input type="button" ng-click="remove()" value="remove" />
            <input type="button" ng-click="selectFirst()" value="select first" />
        </p>
         
        <test></test>
 
    </div>
 
    <script>
        angular.module('app', ['kendo.directives']);
 
        angular.module('app').directive('test', function() {
            return {
                restrict:'AE',
                template: '<h1>test123</h1>'
            }
        });
 
        angular.module('app').controller('MainCtrl', function ($timeout, $scope) {
 
            $scope.name = 'some name';
 
            var data = new kendo.data.ObservableArray([
                { name: 'tab1', content: '<h3>tab1</h3>' },
                { name: 'tab2', content: '<h3>tab2</h3>' },
                { name: 'tab3', content: '<test></test>' }  // directive
            ]);
 
            $scope.tabStripOptions = {
                animation: false,
                dataTextField: 'name',
                dataContentField: 'content',
                dataSource: data
            };
 
            $scope.add = function () {
                $timeout(function() {
                    data.push({ name: 'tabN', content: '<test></test>' });  // directive
                },0,true);
            };
 
            $scope.remove = function () {
                data.pop(data.length - 1);
            };
 
            $scope.selectFirst = function () {
                $scope.tabstrip2.select(0);
            };
 
            $scope.$on('kendoWidgetCreated', function (ev, widget) {
                console.log('kendoWidgetCreated');
                if (widget === $scope.tabstrip2) {
                    $scope.tabstrip2.select(1);
                }
            });
 
            $scope.$on('kendoRendered', function (ev) {
                console.log('kendoRendered');
                console.log(ev);
            });
        });
    </script>
 
</body>
</html>

Thanks folks ...

3 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 22 Dec 2014, 01:35 PM
Hello Duncan,

thank you for contacting us. The behaviour you have defined should work in general, however, it does not. The tabstrip widget does not support angularjs binding expressions (and directives) when its content is defined from the datasource. This is an omission on our side, as most of the other widgets support it; I will log it for future consideration.

Meanwhile, a workaround I may suggest is to compile the contents manually, several examples are available here.

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
METRI
Top achievements
Rank 1
answered on 02 Mar 2016, 03:18 PM
I believe there is still a bug. Using this dojo example (http://dojo.telerik.com/AVEV) but updating the kendo script references to 2015.3.1111, it will still fail if you change the directive name from test to tEst (have any capital letter in the name) in both the directive declaration and in the reference to it in the tab3 content value.
0
Petyo
Telerik team
answered on 04 Mar 2016, 09:07 AM
Hello,

The problem you describe is not related to Kendo UI. Angular converts camel casing to dashes for the directive tag name. You can attempt the same thing without the Tabstrip widget. 

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
TabStrip
Asked by
Duncan
Top achievements
Rank 1
Answers by
Petyo
Telerik team
METRI
Top achievements
Rank 1
Share this question
or