Using same controller in two places in AngularJS

Question

I am working on an Ionic app, screen has lists with checkboxes and option to select all. I am new to AngularJS and Ionic.

"Select All" works fine when using controller in parent element where Select all and other lists reside.

I want to move the Select All to sub-header so that "Select All" will be always visible when we scroll through.

I tried to use the same controller in both places but Select All didn't work, I just read the scope gets changed and the value won't get passed.

Is there any way to pass the changes or any other way to fix this?

And data will be populated from the services.

HTML

 <ion-header-bar class="bar-light bar-subheader">
   <div ng-controller="MainCtrl">
      <ion-checkbox ng-model="selectAll" ng-click="checkAll()" >
          <p>Select All</p>
      </ion-checkbox>
    </div>
</ion-header-bar>
<ion-content class="has-header">
  <div class="list" ng-controller="MainCtrl">    
    <ion-checkbox ng-repeat="item in devList" ng-model="item.checked">
      <div class="row">
        <div class="col">
          <p>{{ item.text }} - 99</p>
          <p>{{ item.text }} - 99</p>
        </div>
         <div class="col right">
          <p>{{ item.text }} - 99</p>
           <p>{{ item.text }} - 99</p>
        </div>
      </div>
    </ion-checkbox>
  </div>
</ion-content>

JS

.controller('MainCtrl', function($scope) {
  $scope.devList = [
    { text: "HTML5", checked: true },
    { text: "CSS3", checked: false },
    { text: "JavaScript", checked: false }
  ];

   $scope.checkAll = function() {    
        if ($scope.selectAll) {
            $scope.selectAll = true;
        } else {
            $scope.selectAll = false;
        }
        angular.forEach($scope.devList, function (item) {
            item.checked = $scope.selectAll;
        });
    };
});

CodePen link

Don't mention `ng-controller` in view, use it where you are defining your states like - `.state('mystate', {controller: 'mainCtrl', templateUrl: 'mytemplate.html'})` — swapnesh, May 01 '16 at 18:34
`if ($scope.selectAll) { $scope.selectAll = true; } else { $scope.selectAll = false; }` is basically useless, `$scope.selectAll = !$scope.selectAll;` would make more sense otherwise you are never toggling the value. — GillesC, May 02 '16 at 09:23
@swapnesh I tried it, but it is not working, I tried by keeping header tag inside also but no luck — Shankar, May 05 '16 at 03:16
@swapnesh Thanks, when moving the sub header () inside it is working, but getting design issues. Have to look on for a way to fix it. — Shankar, May 05 '16 at 17:42

score 4 · Accepted Answer · answered May 01 '16 at 19:33

Each controller will have it's own $scope. So, two different instances of controllers might have the same code, but they will still have different scopes.

So, you want to pass the changes from one controller to another. In that case, there are a few solutions:

Using events:

$scope has a few methods which can help you to handle these cases.

These methods:

$on(name, listener) - Listens on events of a given type/name.

$emit(name, args) - Dispatches an event name upwards through the scope hierarchy notifying the registered $rootScope.Scope listeners.

$broadcast(name, args) - Dispatches an event name downwards to all child scopes (and their children) notifying the registered $rootScope.Scope listeners.

These methods will allow you to rise events from one controller and handle them inside the others.

Shared services

Also, you can create the service which will be injected into different controllers and, lets say, first controller will read this shared data and the second will write the data to this shared service. Here is an article with some examples - link.

You can chose the approach that you like more, but I prefer shared services. This approach keeps my controllers more clear and I can manage cross-controllers dependencies by injection this shared services.

Hope it will help you.

I have tried both ways, feel shared services is better way. Used [factory] (http://stackoverflow.com/questions/16286605/angularjs-initialize-service-with-asynchronous-data) promises and passed it through $stateProvider - resolve object. — Shankar, May 31 '16 at 02:10

score 1 · Answer 2 · answered May 02 '16 at 09:14

You cannot use 2 'ng-controllers' with same controllers because the scopes created from those 2 controllers will be different, as controller scopes are created using the constructor pattern.

Ideally you should use $stateProvider to define your routes and their corresonding template and controller like below:

But for simplicity sake I have forked your codepen and used a single controller at the parent level of the view and it is working fine: http://codepen.io/anon/pen/vGQJNj

<body  ng-controller="MainCtrl">

<ion-header-bar class="bar-positive">
  <h1 class="title">Checkboxes</h1>
</ion-header-bar>

<ion-header-bar class="bar-light bar-subheader">
      <div>
            <ion-checkbox ng-model="selectAll" ng-click="checkAll()" >

              <p>Select All</p>
  </ion-checkbox>
      </div>

  </ion-header-bar>

<ion-content class="has-header">

  <div class="list">

    <ion-checkbox ng-repeat="item in devList"
                  ng-model="item.checked" 
                  ng-checked="item.checked">
      <div class="row">
        <div class="col">
          <p>{{ item.text }} - 99</p>
          <p>{{ item.text }} - 99</p>
        </div>
         <div class="col right">
          <p>{{ item.text }} - 99</p>
           <p>{{ item.text }} - 99</p>
        </div>
      </div>
    </ion-checkbox>

    <div class="item">
      <pre ng-bind="devList | json"></pre> 
    </div>

    <div class="item item-divider"> 
      Notifications
    </div>

    <ion-checkbox ng-model="pushNotification.checked"
                  ng-change="pushNotificationChange()">
      Push Notifications
    </ion-checkbox>

    <div class="item">
      <pre ng-bind="pushNotification | json"></pre> 
    </div>

    <ion-checkbox ng-model="emailNotification"
                  ng-true-value="'Subscribed'"
                  ng-false-value="'Unubscribed'">
      Newsletter
    </ion-checkbox>
    <div class="item">
      <pre ng-bind="emailNotification | json"></pre> 
    </div>

  </div>

</ion-content>

</body>

Using same controller in two places in AngularJS

2 Answers2