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

Use AngularJS directive in tab content

3 Answers 412 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 ...

Use AngularJS directive in tab content

3 Answers, 1 is accepted