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

Use AngularJS directive in tab content

3 Answers 465 Views

TabStrip

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

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

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!