web-dev-qa-db-ja.com

1つのページ上のangularjs複数のコントローラ

複数のコントローラーがあるページがあり、コントローラーの1つが同じページ内の2つの異なるdivで使用されています。スコープの問題なのか、それともコード内の何かを見逃しているのかはわかりません。

ここにplunkrがあります http://plnkr.co/edit/IowesXE3ag6xOYfB6KrN?p=preview

ユーザーが「節約」リンクをクリックするとテキストボックスが非表示になり、「コスト」リンクをクリックするとボックスが表示されます。

javascriptangularjsangularjs-scopecontrollers
19
Annie C

Ng-controllerを使用するたびに、それ自身のスコープを持つコントローラの新しいインスタンスを作成します。 bodyタグ（または新しい親）にsubCCtrlを設定し、現在オンになっている2つのdivからそれを削除すると、うまくいきます。

他の解決策としては、「hideThisBox」をルートスコープに保持し、保存をクリックしたときにイベントをブロードキャストするか、サービスに保持する方法があります。

10
kaesve

同じコントローラーですが、2回宣言されています。そのため-twoスコープ。
通常、解決策は、ng-controller宣言を1 domレベル上に移動することです（あなたの場合、body要素に移動します。onceのみ）、1回のみ使用できます。それ以外の場合は、angular services。

更新されたplunkrを参照してください： http://plnkr.co/edit/pWnx2mdMeOeH33LUeTGm?p=preview

16
oori

コントローラとビューでいくつかの変更を行う必要があります。

var app = angular.module('plunker', []);

 app.controller('subCCtrl', function($scope) {
   $scope.hideThisBox = false;
   $scope.update = function(label) {

     if (label == 'Cost')
       $scope.displaybox = true;
     else
       $scope.displaybox = false;
   }
 });
 app.controller('subACtrl', function($scope) {

 });

 app.controller('subBCtrl', function($scope) {

 });

HTML

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script data-require="[email protected]" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
    <script src="app.js"></script>
  </head>

  <body>
            <div ng-controller="subCCtrl" class="row-fluid">

                <div class="span6">
                <a href="#" ng-click='update("Cost");displaybox=true;'>Cost</a>
                <br />
                <a href="#" ng-click='update("Savings");displaybox=fasle;'>Savings</a>
                <br />

                     </div>

            <hr />
            <div ng-controller="subACtrl">Do stuff that uses subACtrl</div>
            <div ng-controller="subBCtrl">Do stuff that uses subBCtrl</div>
            <hr />
            <div ng-controller="subCCtrl" class="row-fluid">
                <div class="span3">
                    <label>If click on 'Savings', hide below box: </label>
                </div>
                  <div ng-hide="hideThisBox" class="span6">
                    <input type="text" ng-model="test2" ng-show="displaybox"/>
                </div>          
            </div>
       </div>
  </body>

</html>
3
Muhammad Awais

あなたはすでにあなたの答えを得たと思いますが、次に来る人のためにいくつかのヒントがあります^^（それが盛り上がることを願っています）：

  • ng-controller="myCtrl"は、「myCtrl」コントローラの新しいインスタンスを設定します。i'ts own scope

  • 使用されるスコープは、最初のdivのコントローラーの1つになります。つまり、次のようなものがある場合、

         <div id="maindiv" ng-controller="myCtrl>
                  <div id="subdiv1">
                      <div></div>
                      <div>
                          <div>some text</div>
                      </div>
                  </div>
                  <div id="subdiv2" ng-controller="myCtrl">
                      <div>
                          <span>-</span>
                          <span>so</span>
                          <span>this</span>
                          <span>is</span>
                          <span>a</span>
                          <span>subdiv</span>
                          <span>.</span>
                      </div>
                  </div>
              </div>
          </div>
  • Subdiv1はmaindivと同じスコープになります
  • ただし、Subdiv2には、myCtrlコントローラーのスコープの独自のインスタンスがあります。
  • グローバルな方法では、Subdiv2のスコープは、メインディビジョンのスコープからのデータであるはずです。

それはほんのいくつかの簡単なヒントであり、SOまたはグーグルでより有用なものを見つけるでしょうが、とにかく、それがあなたの一部を助けることができればそれはクールです。

0
xoxel

Javascriptスコープについて読むことをお勧めします。コードの問題は、ng-controllersのスコープでした。

0
Rudzani Mulaudzi