在AngularJS的兩個地方使用相同的控制器

Question

我正在開發一個Ionic應用程序，屏幕上有帶復選框的列表和選擇全部的選項。 我是AngularJS和Ionic的新手。

在“父元素”中使用控制器時，“全選”工作正常，其中選擇所有列表和其他列表。

我想將Select All移動到子標題，以便在我們滾動時始終顯示“Select All”。

我嘗試在兩個地方都使用相同的控制器，但是Select All不起作用，我只是讀取了范圍變化而且值不會被傳遞。

有沒有辦法通過更改或任何其他方式來解決這個問題？

數據將從服務中填充。

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鏈接

Answer 1

每個控制器都有自己的$ scope。 因此，兩個不同的控制器實例可能具有相同的代碼，但它們仍將具有不同的范圍。

因此，您希望將更改從一個控制器傳遞到另一個控制器。 在這種情況下，有一些解決方案：

使用事件：

$scope有一些方法可以幫助您處理這些情況。

這些方法：

$ on（name，listener） - 偵聽給定類型/名稱的事件。

$ emit（name，args） - 通過作用域層次結構向上調度事件名稱，通知已注冊的$rootScope.Scope監聽器。

$ broadcast（name，args） - 將事件名稱向下調度到所有子范圍（及其子級），通知已注冊的$rootScope.Scope偵聽器。

這些方法允許您從一個控制器上升事件並在其他控制器內處理它們。

共享服務

此外，您可以創建將注入到不同控制器中的服務，並且假設第一個控制器將讀取此共享數據，第二個控制器將數據寫入此共享服務。 這是一篇帶有一些例子的文章 - 鏈接。

您可以選擇您喜歡的方法，但我更喜歡共享服務 。 這種方法使我的控制器更加清晰，我可以通過注入這個共享服務來管理跨控制器依賴。

希望它會對你有所幫助。

Answer 2

您不能將2'ng-controllers'與相同的控制器一起使用，因為從這兩個控制器創建的范圍將是不同的，因為控制器范圍是使用構造函數模式創建的。

理想情況下，您應該使用$stateProvider來定義您的路由及其相應的模板和控制器，如下所示：

但為了簡單起見，我已經分叉了你的codepen並在視圖的父級使用了一個控制器，它工作正常： 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>

在AngularJS的兩個地方使用相同的控制器

問題描述

2 個解決方案

解決方案1
4 已采納 2016-05-01 19:33:41

解決方案2
1 2016-05-02 09:14:46

在AngularJS的兩個地方使用相同的控制器

問題描述

2 個解決方案

解決方案1 4 已采納 2016-05-01 19:33:41

解決方案2 1 2016-05-02 09:14:46

解決方案1
4 已采納 2016-05-01 19:33:41

解決方案2
1 2016-05-02 09:14:46