在 AngularJS 的两个地方使用相同的控制器

Question

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

在“全选”和其他列表所在的父元素中使用控制器时，“全选”工作正常。

我想将全选移动到子标题，以便在我们滚动时始终可以看到“全选”。

我试图在两个地方使用相同的控制器，但 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;
        });
    };
});

代码笔链接

Answer 1

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

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

使用事件：

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

这些方法：

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

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

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

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

共享服务

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

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

希望它能帮助你。