I am encountering an issue with ng-include not retrieving the file. What could be the reason for the problem in accessing a property from a link within ng-include? I would appreciate any assistance with resolving this matter.
(function(){
var app = angular.module('AVS', []);
app.controller('TestCtrl', function($scope){
var tabClasses;
function initializeTabs() {
tabClasses = ["","","",""];
}
$scope.getTabClass = function (tabNum) {
return tabClasses[tabNum];
};
$scope.getTabPaneClass = function (tabNum) {
return "tab-pane " + tabClasses[tabNum];
};
$scope.setActiveTab = function (tabNum) {
initializeTabs();
tabClasses[tabNum] = "active";
};
$scope.tab1 = " ";
$scope.tab2 = "dsadasa ";
$scope.tab3 = "dsadas ";
$scope.tab4 = "dsadsa ";
//Initialize
initializeTabs();
$scope.setActiveTab(1);
$scope.sutabs = {
name: ['Life Safety Manager™', 'Life Safety Elements', 'Fire Dampers', 'Fire Extinguishers'],
number: [1,2,3,4],
status: ['','','','']
};
$scope.lsm = {
name: ['Life Safety Manager ™', 'Life Safety Elements', 'Fire Dampers', 'Fire Extinguishers'],
pathname: ['life-safety-manager', 'Life-Safety-Elements', 'Fire-Dampers', 'Fire-Extinguishers'],
number: [1,2,3,4],
status: ['','','','']
};
$scope.lstabs = {
name: ['Life Safety Master Plans', 'Evacuation Maps', 'Fire Suppression', 'Fire Alarm Layouts', 'Exit Path Layouts', 'Life Safety Devices', 'Occupancy','Wayfinding'],
pathname: ['Life-Safety-Master-Plans', 'Evacuation-Maps', 'Fire-Suppression', 'Fire-Alarm-Layouts', 'Exit-Path-Layouts', 'Life-Safety-Devices', 'Occupancy','Wayfinding'],
number: [1,2,3,4,5,6,7,8],
status: ['','','','','','','','']
};
});
})();
<div class = "row" ng-controller='TestCtrl'>
<div class ="col-md-2">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li ng-class="getTabClass({{lsm.number[0]}})" ng-click="setActiveTab({{lsm.number[0]}})" class = "{{lsm.status[0]}}"><a href="#{{lsm.pathname[0]}}" data-toggle="tab">{{lsm.name[0]}}</a></li>
<li ng-class="getTabClass({{lsm.number[1]}})" ng-click="setActiveTab({{lsm.number[1]}})" class = "{{lsm.status[1]}}"><a href="#{{lsm.pathname[1]}}" data-toggle="tab">{{lsm.name[1]}}</a></li>
<li ng-class="getTabClass({{lsm.number[2]}})" ng-click="setActiveTab({{lsm.number[2]}})" class = "{{lsm.status[2]}}"><a href="#{{lsm.pathname[2]}}" data-toggle="tab">{{lsm.name[2]}}</a></li>
<li ng-class="getTabClass({{lsm.number[3]}})" ng-click="setActiveTab({{lsm.number[3]}})" class = "{{lsm.status[3]}}"><a href="#{{lsm.pathname[3]}}" data-toggle="tab">{{lsm.name[3]}}</a></li>
</ul>
</div>
</div>
<div class = "col-md-10">
<div class="tab-content">
<div ng-class="getTabPaneClass({{lsm.number[0]}})" id="{{lsm.pathname[0]}}" class="content {{lsm.status[0]}}">
<div ng-include src = "'disciplinedrawings/life-safety-manager/{{lsm.pathname[0]}}.html'"></div>
</div>
<div ng-class="getTabPaneClass({{lsm.number[1]}})" id="{{lsm.pathname[1]}}" class="content {{lsm.status[1]}}">
<div ng-include src = "'disciplinedrawings/life-safety-manager/{{lsm.pathname[1].html}}'"></div>
</div>
<div ng-class="getTabPaneClass({{lsm.number[2]}})" id="{{lsm.pathname[2]}}" class="content {{lsm.status[2]}}">
<div ng-include src = "'disciplinedrawings/life-safety-manager/{{lsm.pathname[2].html}}.html'"></div>
</div>
<div ng-class="getTabPaneClass({{lsm.number[3]}})" id="{{lsm.pathname[3]}}" class="content {{lsm.status[3]}}">
<div ng-include src = "'disciplinedrawings/life-safety-manager/{{lsm.pathname[3].html}}.html'"></div>
</div>
</div>
</div>
</div>