1

This question have good chance to be a duplicate, but after some searches I wasn't able to find a good explanation to my problem - so I apologize if this is the case.

Well, I got a template which is actually written like this:

<div ng-include="'includes/header.html'"></div>

<section>... Template for homepage, page1, page2... </section>

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

My header.html is like this:

<section class="header">
    <div class="wrapper">
        <a href="#/"><img id="logotype" src="images/logotype.png"></a>
        <ul id="menu">
            <li>
                <a href="#/">Home</a>
            </li>
            <li class="border-none">
                <a class="a" ng-click="chatClicked = !chatClicked">Click to chat</a>
            </li>
            <li id="logout" class="glyphicon glyphicon-off border-none">
                <a href="#/logout">Logout</a>
            </li>
        </ul>
    </div>
</section>

And my footer.html like this:

<section class="footer">
    <div class="wrapper">
        <ul id="menu-left">
            <li>
                <a href="#/">Home</a>
            </li>
            <li>
                <a class="a" ng-click="chatClicked = !chatClicked">Click to chat</a>
            </li>
    </div>
</section>

I was wondering if there is a way to open open/hide this new include on all pages (

<div ng-if="chatClicked" ng-controller='ChatController' ng-include="'includes/popup-chat-to-click.html'"></div>

) each time the event chatCliked is triggered - and if it is possible - where it is the best to place this last div?

F3L1X79
  • 2,575
  • 2
  • 29
  • 45

1 Answers1

1

Ok problem resolved using this link, sorry:

AngularJS - losing scope when using ng-include

This was a matter of $scope.

I had to add this in my controller: 

app.controller('homeController',
        ['$scope'',
            function ($scope) {

                $scope.chat = { clicked: false };
}]);

in my main view:

<div ng-include="'includes/header.html'"></div>

<div ng-if="chat.clicked" ng-controller='ChatController' ng-include="'modules/chat/popup-contact.html'"></div>

in my header.html:

<a class="a" ng-click="chat.clicked = !chat.clicked">Contact us</a>
Community
  • 1
  • 1
F3L1X79
  • 2,575
  • 2
  • 29
  • 45
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – theDmi Aug 13 '15 at 07:49
  • @theDmi: Roger that - answer evolved. – F3L1X79 Aug 13 '15 at 08:27