0

I'm making a hotel website and have a search destination,arrive,depart etc on my home page.

I also have the search integrated on different pages within the site. This is used as an include into my template and I have used ng-show to hide it on my home page as I want to use a full page jumbotron with search fields on the home page.

Therefore my views are different but the functionality is exactly the same.

My home view is looking for the home controller and my search view is looking for my search controller.

I have set up a global controller (I added for functionality such as page titles and active nav states with css) so to me this would be the place where both search forms can access and pass the required data.

My global controller is added to the body tag and I can access it onload with the console.log.

I thought I could access ng-submit="globalController.setDestination()" on both forms but nothing happens.

How can I access a global controller usng ng-submit? Do I need these to both go to their relative controllers then route it on somehow? Is there a better way for 2 views to access/pass the same data?

I know I can make a service however I also have quite a few $scope elements so I thought by passing 2 views to 1 controller might keep this DRY.

<form name="destinationSearch" ng-submit="globalController.setDestination()">

Part of my template

<body ng-cloak ng-controller="globalController">

    <div id="wrap">  
        <header class="hidden-xs-up">
            <h1 ng-bind="$state.current.data.pageTitle"></h1>
        </header>

        <!-- Load the header -->
        <div ng-controller="NavController" ng-include src="'app/components/core/nav.html'"></div>
        <!-- /header -->
        <div>
            <!-- Load Search -->
            <div ng-show="globalData.showSearchBar">
                <div ng-include src="'app/shared/search/searchView.html'"></div>
            </div> 

            <!-- /search -->
            <!-- Angular -->
            <div ui-view></div>
            <!-- /Angular -->
        </div>
    </div>
ottz0
  • 2,595
  • 7
  • 25
  • 45

2 Answers2

1

Try using controllerAs syntax

<body ng-cloak ng-controller="globalController as gc">

then use

<form name="destinationSearch" ng-submit="gc.setDestination()">

Check this for more.

Nitin Varpe
  • 10,450
  • 6
  • 36
  • 60
  • 1
    This works. To access the function I changed the function name in the controller to $scope.gc.setDestination – ottz0 Jan 06 '16 at 07:37
  • You can mark this as an answer if this has helped you as it may help other users if they are facing similar kind of issue. – Nitin Varpe Jan 06 '16 at 07:38
  • Before I do..Shayous answer works also...Would it be better to use your answer rather than use $parent? I guest it would as your answer is namespaced? – ottz0 Jan 06 '16 at 07:41
  • Yup, Method I mentioned is more aligned to what angular coding guidelines states.Please check http://www.johnpapa.net/angular-style-guide/ – Nitin Varpe Jan 06 '16 at 07:43
0

Try using $parent syntax:

ng-submit="$parent.setDestination()"

This link may be useful: AngularJS access parent scope from child controller

Community
  • 1
  • 1
Shayou
  • 19
  • 3
  • This works also..Nitin's answer works too..Would it be better to use this or the above answer? Maybe the above as it is now kind of namespaced? – ottz0 Jan 06 '16 at 07:38