Use AngularJS directive in tab content

4 posts, 0 answers
  1. Duncan
    Duncan avatar
    1 posts
    Member since:
    Mar 2013

    Posted 19 Dec 2014 Link to this post

    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 ...

  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 22 Dec 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. METRI
    METRI avatar
    2 posts
    Member since:
    May 2012

    Posted 02 Mar Link to this post

    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.
  5. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 04 Mar Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready