Angular JS How to insert custom Directives in the Bootstrap UI Tabs

Question

As per my question , i am able to insert one directive into another directive successfully. But now, when i am using the same way to put the directive in the tabs as follows, I am unable to compile the directive properly and it is showing me UNKNOWN CHARACTERS like :: {"0":{"ng339":6},"length":1}

Please note that: 1) I used the example from the Angular UI BootStrap Tabs

 var myapp = angular.module('myapp', ['ngAnimate', 'ui.bootstrap']); angular.module('myapp') .controller('myCtrl',['$scope','$compile', function ($scope, $compile) { $scope.tabs = [ { title:'Dynamic Title 1', content:'<first-directive></first-directive>' }, { title:'Dynamic Title 2', content:'Dynamic content 2' } ]; var compileTabs = function() { var ele = $compile($scope.tabs[0].content)($scope); $scope.tabs[0].content = ele; }; compileTabs(); $scope.model = { name: 'Tabs' }; }]); angular.module('myapp').directive("firstDirective",['$compile', function($compile) { return { templateUrl : './directives/firstdirective.html', scope: { }, controller: function ($scope) { $scope.firstCtrl = function() { console.log('I am in the firstCtrl'); } }}]);

 <!DOCTYPE html> <html ng-app="myapp"> <head> <title>AngularJS: UI-Router Quick Start</title> <!-- Bootstrap CSS --> <link href="lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> </head> <body class="container"> <div ng-controller="myCtrl"> <uib-tabset> <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled"> {{tab.content}} </uib-tab> </uib-tabset> </div> <script src="lib/angular/angular.js"></script> <script src="lib/angular-animate/angular-animate.js"></script> <script src="lib/angular-bootstrap/ui-bootstrap-tpls.js"></script> <script src="lib/angular-sanitize/angular-sanitize.js"></script> <script src="lib/angular-ui-router/release/angular-ui-router.js"></script> <script src="app.js"></script> </body> </html>

Answer 1

I think you just forgot definitions of the services.

Your code

.controller('myCtrl',['$compile', function ($scope, $window, $compile) {

$window and $compile will be undefined .

Right code

.controller('myCtrl',['$scope', '$window', '$compile', function ($scope, $window, $compile) {

Angular JS How to insert custom Directives in the Bootstrap UI Tabs

Question

1 answers

solution1
0 2016-01-12 02:28:40

Your code

Right code

Angular JS How to insert custom Directives in the Bootstrap UI Tabs

Question

1 answers

solution1 0 2016-01-12 02:28:40

Your code

Right code

solution1
0 2016-01-12 02:28:40