On my webpage, I am utilizing JavaScript's load() method to insert a specific div element from another page:
setTimeout(function(){
function showPattern(patternId, page_url) {
var patternstuff = $(patternId).load(page_url + " .pattern-markup");
return patternstuff;
}
showPattern("#tabsOpen .pattern", "individuals/tabs-open/index.html");
}, 200);
This is done with a timeout to ensure that the HTML loads and renders properly.
The tabs on the page are built using AngularJS:
<div class="tab-container container" ng-controller="PanelController as panel">
<ul class="tabs">
<li class="active" ng-class="{ active: panel.isSelected(1) }"><a ng-click="panel.selectTab(1)">Tab 1</a></li>
<li ng-class="{ active: panel.isSelected(2) }"><a ng-click="panel.selectTab(2)">Tab 2</a></li>
<li ng-class="{ active: panel.isSelected(3) }"><a ng-click="panel.selectTab(3)">Tab 3</a></li>
</ul>
<div class="tab-contents">
<div class="tab-content" ng-show="panel.isSelected(1)">
Tab 1 content
</div>
<!-- Tab 1 Ends Here -->
<div class="tab-content" ng-show="panel.isSelected(2)">
Tab 2 content
</div>
<!-- Tab 2 Ends Here -->
<div class="tab-content" ng-show="panel.isSelected(3)">
Tab 3 content
</div>
<!-- Tab 3 Ends Here -->
</div>
</div>
However, upon rendering the page, the Angular functionality does not work correctly, and all tab-content divs are displayed. The Angular tabs controller code is as follows:
app.controller("PanelController", function() {
this.tab = 1;
this.selectTab = function(setTab) {
this.tab = setTab;
};
this.isSelected = function(checkTab) {
return this.tab === checkTab;
};
});
The individual page from where the tabs' HTML is retrieved contains the same ng-app="manual" attribute. This is what the individual HTML page looks like:
<!doctype html>
<html lang="en" ng-app="manual">
<head>
<title>Tabs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../assets/css/patterns.css">
<script src="../../assets/js/angular.min.js"></script>
<script src="../../assets/js/app.js"></script>
</head>
<body>
<!-- Tabs -->
<div class="pattern-markup">
<div class="tab-container container" ng-controller="PanelController as panel">
<ul class="tabs">
<li ng-class="{ active: panel.isSelected(1) }"><a ng-click="panel.selectTab(1)">Tab 1</a></li>
<li ng-class="{ active: panel.isSelected(2) }"><a ng-click="panel.selectTab(2)">Tab 2</a></li>
<li ng-class="{ active: panel.isSelected(3) }"><a ng-click="panel.selectTab(3)">Tab 3</a></li>
</ul>
<div class="tab-contents">
<div class="tab-content" ng-show="panel.isSelected(1)">
Tab 1 content
</div>
<!-- Tab 1 Ends Here -->
<div class="tab-content" ng-show="panel.isSelected(2)">
Tab 2 content
</div>
<!-- Tab 2 Ends Here -->
<div class="tab-content" ng-show="panel.isSelected(3)">
Tab 3 content
</div>
<!-- Tab 3 Ends Here -->
</div>
</div>
</div>
<!-- End Tabs -->
</body>
</html>
I'm wondering if I need to somehow reinitialize AngularJS after loading the HTML via JavaScript for the tabs to function properly?