AngularJS functions not applying after javascript load?

Question

I have a page where I'm using javascript load() to inject a particular 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);

with a timeout, otherwise the html won't load and render.

I'm using AngularJS on the tabs that I am bringing in:

<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, when the page renders, the Angular isn't working and all of the tab-content divs are showing. The Angular tabs controller is here:

app.controller("PanelController", function() {
    this.tab = 1;

    this.selectTab = function(setTab) {
        this.tab = setTab;
    };
    this.isSelected = function(checkTab) {
        return this.tab === checkTab;
    };
});

The Angular tabs are working fine on the individual page I am pulling them from. Both that page, and this page I am loading them into have the same ng-app="manual" attribute on the surrounding element. Here is the individual HTML page I am drawing the tabs HTML from:

<!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>

Do I need to reinitialize AngularJS somehow, after the HTML is loaded by javascript, for Angular to recognize the tabs and make them work?

Or, is there a better way to load in these chunks of HTML with Angular, so that I'm not relying on javascript load()? That is the only method I've found to be able to pull in a specific <div> from a page. (I want to keep a separate page for that HTML elsewhere.) — Bice
– Bice, Commented Jul 27, 2015 at 15:31
It is not, it is simply living in an individual HTML file in a different directory. — Bice
– Bice, Commented Jul 27, 2015 at 15:41
There lies your problem. Enclose the code in a directive and attach it to your topmost DOM element (body perhaps). Then check it out again. — callmekatootie
– callmekatootie, Commented Jul 27, 2015 at 15:44

Sudhansu Choudhary · Accepted Answer · 2015-07-27 15:42:56Z

1

I wonder if the reference to the value of this inside selectTab and isSelected is creating issues. Try the following code in controller,

app.controller("PanelController", function() {
    var panel = this;
    panel.tab = 1;

    panel.selectTab = function(setTab) {
        panel.tab = setTab;
    };
    panel.isSelected = function(checkTab) {
        return panel.tab === checkTab;
    };
});

answered Jul 27, 2015 at 15:42

Sudhansu Choudhary

3,3903 gold badges21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bice Over a year ago

Unfortunately that did not change anything. However I'll leave that change in. Thanks!

Collectives™ on Stack Overflow

AngularJS functions not applying after javascript load?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related