ฉันกำลังอ่านไฟล์ data.json และฉันกำลังพยายามเติมแท็บโดยใช้สิ่งนี้ ฉันสามารถทำได้โดยไม่ต้องใช้คำสั่งที่กำหนดเอง แต่ฉันต้องการสร้างความเป็นไปได้หลายอย่างของเค้าโครงโดยใช้คำสั่ง อย่างไรก็ตาม ฉันไม่สามารถทำให้ ng-repeat ทำงานภายในไฟล์ templates/directives/tabs.html ได้ นี่คือการตั้งค่าของฉัน นอกจากนี้ $scope.data.data ของฉันยังพาฉันไปยังอาร์เรย์ที่สามารถวนซ้ำได้สำเร็จอีกครั้ง ขอบเขตภายในคำสั่งเจาะลึกแตกต่างจากใน index.html หรือไม่
index.html การเจาะลึกคือ {{data.whatever}} ต่อไปนี้ภายในคำสั่งเหมือนกันหรือไม่
.controller('TabController', function($scope, $http, _){
$scope.model = {};
$http.get('data.json').then(function(resp) {
$scope.data = resp.data.data;
})
angular.module('myApp').directive('cmTabs', function() {
return {
restrict: 'A',
scope: {
content: '='
},
templateUrl: 'templates/directives/tabs.html'
};
})
});
มาร์กอัปของฉันเป็นเช่นนั้น
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="TabController">
<head>
<link rel="stylesheet" href="/thnode_modules/bootstrap/dist/css/bootstrap.css">
<title>{{data.PageTitle}}</title>
</head>
<body>
<nav class="navbar navbar-default"><a class="navbar-brand" href="/th#"><!-- <img alt="Brand" src="..."> -->{{data.PageTitle}}</a>
<ul class="nav navbar-nav">
<li ng-class='{active:$first}' ng-repeat="menu in data.toplevelcontainer" ng-click="model.activeTab=tab" tooltip="{{menu.label}}" tooltip-trigger="mouseenter" tooltip-placement="bottom">
<a href="/th#">{{menu.label}}</a>
</li>
</ul>
</nav>
<div class="container-fluid" ng-if="data.Layout === 'tabs'" >
<div cm-tabs content="data"></div>
</div>
<div class="container-fluid" ng-if="data.Layout === 'menu'">
<h1>menu</h1>
</div>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/underscore/underscore-min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js" type="text/javascript"></script>
<script src="app.js"></script>
<script>
$("ul.nav-tabs a").click(function (e) {
e.preventDefault();
$(this).tab('show');
});</script>
</body>
</html>
เทมเพลตคำสั่ง
<div class="tabbable boxed parentTabs">
<div class="tab-content">
<div class="tab-pane fade active in" id="set1">
<div class="tabbable">
<ul class="nav nav-tabs" ng-repeat="t in data.toplevelcontainer">
<li ng-class='{active:$first}' ng-repeat="st in t.content.innercontent" data-toggle="tooltip" data-placement="left" title="{{st.tooltip}}"><a href="/th#{{st.label}}">{{sub_tab.label}}</a></li>
</ul>
<div class="tab-content">
</div>
</div>
</div>
</div>
</div>
contentไว้อย่างไร - person lintmouse schedule 20.10.2015})- person Phil schedule 20.10.2015contentของคุณภายในเทมเพลตคำสั่งของคุณได้อย่างไร - person Abhilash Augustine schedule 20.10.2015contentแทนdata- person Abhilash Augustine schedule 20.10.2015accepted answerได้ไหมหากฉันโพสต์ความคิดเห็นนี้เป็นคำตอบของฉัน :) - person Abhilash Augustine schedule 20.10.2015