Question

我正在使用Ionic应用程序，屏幕上有带复选框的列表和选择全部的选项。我是AngularJS和Ionic的新手。

＆＃34;全选＆＃34;在父元素中使用控制器时可以正常工作，其中选择所有列表和其他列表。

我想将Select All移动到子标题，以便＆＃34; Select All＆＃34;当我们滚动时，它将始终可见。

我尝试在两个地方都使用相同的控制器，但是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 link

Answer 1

每个控制器都有自己的$ scope。因此，两个不同的控制器实例可能具有相同的代码，但它们仍然具有不同的范围。

因此，您希望将更改从一个控制器传递到另一个控制器。在这种情况下，有一些解决方案：

使用活动：

$scope有一些方法可以帮助您处理这些情况。

这些方法：

$on(name, listener) - 侦听给定类型/名称的事件。

$emit(name, args) - 通过范围层次结构向上调度事件名称，通知已注册的$rootScope.Scope侦听器。

$broadcast(name, args) - 将事件名称向下调度到所有子范围（及其子级），通知已注册的$rootScope.Scope侦听器。

这些方法允许您从一个控制器上升事件并在其他控制器内处理它们。

共享服务

此外，您可以创建将注入到不同控制器中的服务，并且假设第一个控制器将读取此共享数据，第二个控制器将数据写入此共享服务。这是一篇包含一些示例的文章 - link。

您可以选择您喜欢的方法，但我更喜欢共享服务。这种方法使我的控制器更加清晰，我可以通过注入这个共享服务来管理跨控制器依赖。

希望它会对你有所帮助。

Answer 2

您无法使用2＆n;控制器＆＃39;使用相同的控制器，因为从这两个控制器创建的范围将是不同的，因为控制器范围是使用构造函数模式创建的。

理想情况下，您应该使用$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 个答案: