Jorge A. Jorge A. - 6 months ago 88
AngularJS Question

AngularJs ng-transclude orphan issue

Ive gotten a problem with ng-transcule orphan issue, wich directed me to this link:
https://docs.angularjs.org/error/ngTransclude/orphan?p0=%3Cng-transclude%3E

This happened when trying to implement a tab directive I saw on thinkster.io, into the code of the shaping up with Angularjs course of codeschool.

I've must have donse something wrong but can't figure out what exactly.

I implemented it creating a new module called tab and making it a dependency on the product-store module, this is part of the code:

index.html:

<body ng-controller="StoreController as store">
<h1 ng-bind="'Welcome' | capitalize"></h1>


<ul class="list-group">
<li class="list-group-item" ng-repeat="product in store.products | filter: store.search | orderBy: '-price'" ng-hide="product.soldOut">

<h3>
<product-title product="product"></product-title>
</h3>

<product-panels product="product"></product-panels>
</li>
</ul>

</body>
</html>


codeschoolapp.js:

(function(){

angular.element(document).ready(function() {
angular.bootstrap(angular.element("body")[0], ['store'], {
strictDi: true
});
});

var store = angular.module('store', ['store-products']);

store.controller('StoreController', ['$http', function($http){
var vm = this;
vm.products = [];

$http.get('json/products.json').success(function(data){
vm.products = data;
});
}]);

store.filter('capitalize', function(){
return function (text) {
return text.toUpperCase();
};
});
})();


product.js:

(function(){
var store = angular.module('store-products', ['tab']);

store.directive("productPanels", function(){
return {
restrict: 'E',
templateUrl: "product-panels.html",
scope: { "product" : "=" }
};
});

store.directive("productDescription", function(){
return {
restrict: 'E',
scope: { "product" : "=" },
templateUrl: "product-description.html"
};
});

store.directive("productSpecs", function(){
return {
restrict: 'E',
scope: { "product" : "=" },
templateUrl: "product-specs.html"
};
});

store.directive("productReviews", function(){
return {
restrict: 'E',
scope: { "product" : "=" },
templateUrl: "product-reviews.html"
};
});

store.directive("productTitle", function(){
return {
restrict: 'E',
scope: { "product" : "=" },
templateUrl: "product-title.html"
};
});
})();


tab.js:

(function(){
var tab = angular.module('tab', []);
tab.directive('tab', function(){
return {
restrict: 'E',
transclude: true,
templateUrl: 'tab.html',
require: '^tabset',
scope: {
heading: '@'
},
link: function(scope, elem, attr, tabsetCtrl) {
scope.active = false;
tabsetCtrl.addTab(scope);
}
};
});
tab.directive('tabset', function() {
return {
restrict : 'E',
tranclude : true,
scope: {
type: '@'
},
templateUrl: 'tabset.html',
bindToController: true,
controllerAs: 'tabset',
controller: function() {
var self = this;
self.tabs = [];
self.classes = {};

if(self.type === 'pills') {
self.classes['nav-pills'] = true;
}
else {
self.classes['nav-tabs'] = true;
}

self.addTab = function (tab){
self.tabs.push(tab);

if(self.tabs.length === 1) {
tab.active = true;
}
};
self.select = function(selectedTab) {
angular.forEach(self.tabs, function(tab) {
if(tab.active && tab !== selectedTab) {
tab.active = false;
}
});

selectedTab.active = true;
};
}
};
});
})();


relevant templates:
tabset.html:

<div role="tabpanel">
<ul class="nav" ng-class="tabset.classes" role="tablist">
<li role="presentation"
ng-repeat="tab in tabsett.tabs"
ng-class="{'active': tab.active}">

<a href=""
role="tab"
ng-click="tabsett.select(tab)">{{tab.heading}}</a>
</li>
</ul>

<ng-transclude>
</ng-transclude>
</div>


tab.html:

<div role="tabpanel" ng-show="active" ng-transclude></div>


product-panels.html:

<tabset type="pills">
<tab heading="Description">
<product-description product="product"></product-description>
</tab>
<tab heading="Specifications">
<product-specs product="product"></product-specs>
</tab>
<tab heading="Reviews">
<product-reviews product="product"></product-reviews>
</tab>
</tabset>


Also here is a plunker with everything

The error's link says that I must be missing a transclude : true, but the DDOs do have that, and haven't been able to find much on the issue.

Thanks for the help

Answer

There is just a minor spelling error in tab.js : tranclude : true, should be transclude : true,

Comments