CODEWITHSUNDEEP
angularjsangularjs-directive
Jorge A.
Jorge A.

Reputation: 55

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

Upvotes: 0

Views: 700

Answers (1)

Narain Mittal
Narain Mittal

Reputation: 1160

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

Upvotes: 1

Related Questions