javascript - 在 AngularJS 的两个地方使用同一个 Controller

Question

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

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

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

我尝试在两个地方使用相同的 Controller ，但全选不起作用，我只是看到范围发生了变化，值不会被传递。

有什么方法可以传递更改或任何其他方法来解决这个问题吗？

数据将从服务中填充。

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

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

因此，您想将更改从一个 Controller 传递到另一个 Controller 。在这种情况下，有一些解决方案:

使用事件:

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

这些方法:

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

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

$broadcast(name, args) - 向下分发事件名称到所有子范围(及其子范围)，通知已注册的 $rootScope.Scope 监听器。

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

共享服务

此外，您还可以创建将注入(inject)到不同 Controller 中的服务，比方说，第一个 Controller 将读取此共享数据，第二个将数据写入此共享服务。这是一篇带有一些示例的文章 - link .

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

希望对你有所帮助。