0

I am new to learning AngularJS, so this question might feel wrong, but I would like to know the correct way atleast.

I am creating an html page where the header and footer part I need to keep same. So, I created a header.html and footer.html and added them to my index.html using ng-include directive of AngularJS.

Now, in my header.html I have a text which displays some hidden content when clicked on it. So, I am using ng-click for this. This works fine if I load the header.html file directly.

But, since it is meant to be a part of index.html, when I try to click on the same text through loading index.html, the ng-click doesnt work.

I know there is some problem with scope. But, I dont understand why this is not working.

The ng-app and ng-controller are different for header and index files.

Let me know if you need any more details.

Edit:

Relevant Code Snippets:

header.html

<body ng-app="headerCode" ng-controller="headerCtrl">
    <div id="popup">Hello</div>
    <p id="myaccount" ng-click="showLoginUI()">Sign in / My Account</p>

    <script>
    var app = angular.module('headerCode', []);
    app.controller('headerCtrl', function($scope) {
            $scope.showLoginUI = function() {
            document.findElementById('popup').style.display = "block";
            }
     }

    </script>
</body>

index.html

<body ng-app="">
    <div id="header" ng-include="'header.html'">
    </div>
</body>
Harshad Loya
  • 123
  • 1
  • 2
  • 13
  • Typically, there is only ONE `ng-app` that encompasses your entire application. There is usually not a need to deviate from this and it sounds like your use-case does not warrant having multiple `ng-app` directives. – Pop-A-Stash Oct 01 '18 at 21:22
  • added code snippets! – Harshad Loya Oct 01 '18 at 21:34
  • This really looks like a place for a directive (https://stackoverflow.com/questions/24171893/angularjs-nginclude-vs-directive/24172025#24172025) If you really really need to pursue in this way, you need to overload jqLite with jQuery as the – Lukasz Wojciak Oct 01 '18 at 21:42
  • Could you give me an example on how to use directive for this case and also where would this directive be used in index.html or header.html? @LukaszWojciak – Harshad Loya Oct 02 '18 at 14:49

0 Answers0