AngularJSの2箇所で同じコントローラを使用

私はIonicアプリで作業していますが、画面にはチェックボックス付きのリストとすべてを選択するオプションがあります。私はAngularJSとIonicが初めてです。AngularJSの2箇所で同じコントローラを使用

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>

.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

出典

2016-05-01 Shankar

あなたのようなあなたの状態を定義されている場合、それを使用し、ビューのNG-controller' '言及しないでください - ' .state（ 'mystate' {コントローラ、 'mainCtrl' 、templateUrl： 'mytemplat e.html '}） ' – swapnesh

' if（$ scope.selectAll）{ $ scope.selectAll = true; } else { $ scope.selectAll = false; } 'は基本的に無駄です、' $ scope.selectAll =！$ scope.selectAll; 'そうでなければ値を切り換えることはありません。 – GillesC

@swapnesh私はそれを試しましたが、それは動作していません、私は内のヘッダータグを保持してみましたが運もありません – Shankar

各コントローラには、それ自身の$スコープを持っています。つまり、コントローラの2つの異なるインスタンスが同じコードを持つかもしれませんが、依然として異なるスコープを持ちます。

したがって、あるコントローラから別のコントローラに変更を渡したいとします。

使用してイベント：

$scopeあなたはこれらのケースを処理するために助けることができるいくつかのメソッドを持っていその場合には、いくつかのソリューションがあります。

これらのメソッド：

$on(name, listener) - 指定したタイプ/名前のイベントで待機します。

$emit(name, args) - 登録された$rootScope.Scopeリスナーに通知するスコープ階層からイベント名を上方向にディスパッチします。

$broadcast(name, args) - 登録された$rootScope.Scopeリスナーに通知するすべての子スコープ（およびその子）に対してイベント名を下位に送出します。

これらのメソッドを使用すると、1つのコントローラからイベントを発生させ、他のコントローラ内でイベントを処理できます。

共有サービス

また、あなたは異なるコントローラに注入し、最初のコントローラは、この共有データを読み込みますと第二は、この共有サービスにデータを書き込みます、と言うことができますされるサービスを作成することができます。ここにいくつかの例がある記事 - linkがあります。

さらに好きな方法を選択できますが、共有サービスを使用することをお勧めします。このアプローチは私のコントローラをより明確に保ち、この共有サービスを注入することによってコントローラ間の依存関係を管理することができます。

ご希望の場合はお手数ですが、

出典

2016-05-01 19:33:41 MaKCbIMKo

私は両方の方法を試して、共有サービスが良い方法だと感じている。使用された[工場]（http://stackoverflow.com/questions/16286605/angularjs-initialize-service-with-asynchronous-data）は、$ stateProvider - resolveオブジェクトを約束して渡しました。 – Shankar

コントローラのスコープがコンストラクタパターンを使用して作成されるため、2つのコントローラから作成されたスコープが異なるため、2つの 'ng-controllers'を同じコントローラで使用することはできません。

理想的に、あなたのルートと、以下のような彼らのcorresonding テンプレートとコントローラを定義するために$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>

出典

2016-05-02 09:14:46

AngularJSの2箇所で同じコントローラを使用

答えて

関連する問題