JavaScript Method Not Called in Footer

Question

I am using AngularJS includes. The code for my index.html is as follows:

<!DOCTYPE html>
<html ng-app="">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="../js/application.js"></script>
</head>

<body>
    <div ng-include src="'../includes/footer.html'"></div>
</body>

</html>

application.js is in a folder called js and it reads as follows:

function setFooter() {
    var currentDate = new Date();
    currentYear = currentDate.getFullYear();
    document.write('&copy;&nbsp;' + currentYear + '&nbsp;All rights reserved.');
}

footer.html is in a folder called includes and it reads as follows:

<div id="footer">
    <div class="container">
        <div class="footerContainer">
            <p class="text-white">
                <script type="text/javascript">
                    setFooter();
                </script>
            </p>
        </div>
    </div>
</div>

AngularJS includes are working since the footer is displayed in index.html but the JavaScript function setFooter in footer.html is never called.

Any help would be appreciated. Thanks.

You may want to read the following question: http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — Heretic Monkey, May 20 '15 at 15:55

score 0 · Accepted Answer · answered May 21 '15 at 06:59

ng-include load html by AJAX, so any javascript tag not processed. Instead of using script and document.write directly, better use of angular functionality.

Simplest way, in my opinion, would be add simple controller, like

angular.module('app', [])
       .controller('footerCtrl', function($scope) {
           $scope.currentYear = (new Date()).getFullYear();
       });

and use it in footer

<div id="footer" ng-controller="footerCtrl")">
    <div class="container">
        <div class="footerContainer">
            <p class="text-white">
                &copy;&nbsp;{{ currentYear }}&nbsp;All rights reserved.
            </p>
        </div>
    </div>
</div>

also don't forget name your application in index.html

<html ng-app="app">

working plunker:

JavaScript Method Not Called in Footer

1 Answers1