0
アイブ、ウィッヒは、このリンクに私を監督：に、私はthinkster.ioで見たタブディレクティブを実装しようとしたときに https://docs.angularjs.org/error/ngTransclude/orphan?p0=%3Cng-transclude%3EAngularJs NG-transclude孤児の問題
これが起こりましたコードスクールのAngularjsコースで整形するコード。
私は何か間違った言い訳をしているに違いありませんが、正確に何が分かりません。
私はそれはタブと呼ばれる新しいモジュールを作成し、それを製品ストアモジュールの依存関係を作る実装し、これはコードの一部です：
の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;
};
}
};
});
})();
関連テンプレート： 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>
製品-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>
またhere is a plunkerとすべて
エラーのリンクには、私はtranscludeがないことが必要であると記載されています：真ですが、DDOには問題がありません。ヘルプ
おかげ@NarainMittalする必要があり、それがエラーを回避したが、NG-transcludeせずに、それはディレクティブを置き換えますの中にあるより簡単な例をここにアップロードしています： https://plnkr.co/edit/GbtK2hxPDhkdb5bLisBr?p=preview –
はい、わかりました。ごめんなさい。私はあなたの構造が上手だと思う。 'tab.js'のマイナーなスペルミスです：' tranclude：true、 'は' transclude：true 'でなければなりません。 –
@NarainMittalそれはありがとう！ –