Javascript 在AngularJS中的两个位置使用相同的控制器_Javascript_Html_Angularjs_Ionic Framework

Javascript 在AngularJS中的两个位置使用相同的控制器

javascript html angularjs ionic-framework

Javascript 在AngularJS中的两个位置使用相同的控制器,javascript,html,angularjs,ionic-framework,Javascript,Html,Angularjs,Ionic Framework,我正在开发一款Ionic应用程序，屏幕上有带复选框的列表和选择全部的选项。我对AngularJS和Ionic是新手在Select All和其他列表所在的父元素中使用控制器时，“Select All”可以正常工作我想将全选移动到子标题，以便在滚动浏览时始终可以看到“全选” 我试图在这两个地方使用相同的控制器，但“全选”无效，我只是读取范围发生了更改，值不会被传递是否有任何方法可以传递更改或以任何其他方式修复此问题数据将从服务中填充 HTML <ion-header-bar clas

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

在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>

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

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

使用事件：

$scope

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

这些方法：

-侦听给定类型/名称的事件

-通过作用域层次结构向上发送事件名称，通知已注册的

$rootScope.scope

侦听器

-将事件名称向下分派给所有子作用域（及其子作用域），通知已注册的

$rootScope.Scope

侦听器

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

共享服务

此外，您还可以创建服务，该服务将被注入到不同的控制器中，比如说，第一个控制器将读取该共享数据，第二个控制器将数据写入该共享服务。下面是一篇有一些例子的文章-

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

希望它能帮助您。

您不能将2个“ng控制器”与相同的控制器一起使用，因为从这2个控制器创建的作用域将不同，因为控制器作用域是使用构造函数模式创建的

理想情况下，您应该使用

$stateProvider

定义路由及其相应的模板和控制器，如下所示：

但为了简单起见，我已经分叉了您的代码笔，并在视图的父级使用了一个控制器，它工作得很好：


复选框
全选
{{item.text}}-99
{{item.text}}-99
{{item.text}}-99
{{item.text}}-99
通知
推送通知
新闻稿

不要在视图中提到

ng controller

，在定义状态时使用它，如-

.state（'mystate'，{controller:'mainCtrl'，templateUrl:'mytemplate.html'}）

如果（$scope.selectAll）{$scope.selectAll=true；}否则{$scope.selectAll=false；}基本上是无用的，

$scope.selectAll=$scope.selectAll会更有意义，否则您永远不会切换值。@swapnesh我尝试过它，但不起作用，我尝试过将标题标记也保留在里面，但没有luck@GillesC谢谢你指出+1的提示。@swapnesh谢谢，当在其中移动子标题（）时，它是有效的，但会遇到设计问题。我必须寻找一种方法来解决它。我已经尝试了两种方法，觉得共享服务是更好的方法。使用[factory]（）承诺并通过$stateProvider-resolve对象传递它。
.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;
        });
    };
});

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