12

ページに以下の HTML があります。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myCart">
<head>
    <title>AngularJS Shopping Cart</title>
    <link href="css/jsonstore.css" rel="stylesheet" />
</head>
<body>
    <div id="container">
        <div id="header">
            <h1>The JSON Store</h1>
            <div class="cart-info">
                My Cart (<span class="cart-items">{{item.basketCount}}</span> items)
            </div>
        </div>
        <div id="main" ng-view>
        </div>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular-resource.js"></script>
    <script src="js/routing.js"></script>
    <script src="js/dataresource.js"></script>
    <script src="js/basketinfo.js"></script>
    <script src="js/index.js"></script>
    <script src="js/detail.js"></script>
</body>
</html>

div の「メイン」はルートによって HTML テンプレートに置き換えられますが、ヘッダー セクションをショッピング バスケットの数で更新したいと考えています。

HTMLと以下に示すように、モデルバインディングを試みました：

function DetailController($scope, item, basketDetail) {
    $scope.item = item;
    $scope.item.basketCount = basketDetail.getCount();

    //more code
}

また、サービスを挿入して HTML から呼び出すことも試みました。どちらの方法も何もしません。

誰か助けてくれませんか？

ありがとう

4

3 に答える 3

15

divheaderは、ng-viewで使用するために定義した他のビューと同じように、実際にはビューです。いつの日か、そのヘッダービューに単なるbasketCountモデル以上のものを表示したいと思うかもしれません。ただし、モデルデータを1つでもそのヘッダーセクションに投影しているという事実は、そのセクションをビューにします。したがって、そのモデルを投影するための独自の$ scope、つまり独自のコントローラーを指定することをお勧めします。

残っているのは、basketCountモデルをどこに置くかです。また、複数のビューにより、ユーザーがそのモデルに影響を与える必要のあることを実行できる可能性があることを考慮する必要があります。「多くのアクセスが必要」に対するAngularの通常の答えは、依存性注入です。したがって、basketCountモデルをサービスに入れます。アクセスが必要なビュー/コントローラーは、それを挿入できます。いつかあなたのアプリはこれらのモデルへのアクセスを必要としない追加のビューを持っているかもしれません、それでそれらのビューはサービスを注入しません。

潜在的に、バスケット全体をこのサービスでモデル化できます。

app.factory('basketService', function() {
   return {
     items: [],
     itemCount: 0,
     ...
   }
});


function HeaderCtrl($scope, basketService) {
   $scope.basket = basketService;
   ...
}

function DetailCtrl($scope, basketService) {
   $scope.basket = basketService;
   ...
}

<div id="header" ng-controller="HeaderCtrl">
   <h1>The JSON Store</h1>
   <div class="cart-info">
        My Cart (<span class="cart-items">{{basket.itemCount}}</span> items)
   </div>
于 2013-01-31T05:30:30.747 に答える
3

$rootScope を注入してから更新する必要があります。

function DetailController($scope, $rootScope, basketDetail) {
    $rootScope.item = $rootScope.item || {};
    $rootScope.item.basketCount = basketDetail.getCount();

    //more code
}

これを行う方法は他にもたくさんありますが、おそらく最も簡単なので、これが私の最初の提案です。

編集：あなたの要求に応じて、これを行う他の方法...

$parent を使用して、親スコープにプッシュできます。利点は、それが非常に迅速でクリーンであることです...欠点は、コントローラーの1つが、親が何であるかについてある程度の仮定を行うという点で少しずさんであることです(しかし、それはまだひどいことではありません):

   {{item.basketCount}}
   <div ng-controller="InnerCtrl">
   </div>


function InnerCtrl($scope, basketDetail) {
   $scope.$parent.item = $scope.$parent.item || {};
   $scope.$parent.item.basketCount = basketDetail.getCount();
}

次に、ネストされたコントローラーと親スコープのメソッドを使用して親スコープを更新する、上記のメソッド @asgoth があります。有効ですが、この「他の方法」セクションの私の他の解決策と同様に、コントローラーのコンテナーに関する仮定に依存しており、追加のコントローラーを作成することにも依存しています。

最後に、サービスを作成できます。現在、サービスは通常、この方法では使用されませんが、この方法で使用できます..basketDetail サービスを使用して、値をやり取りすることができます。そのようです：

app.factory('basketDetail', function() {
   return {
      items: { basketCount: 0 },
      getCount: function() {
          //return something here
          return 123;
      }
   }
});


function FooCtrl($scope, basketDetail) {
   $scope.items = basketDetail.items;
   $scope.items.basketCount = basketDetail.getCount();
}

function BarCtrl($scope, basketDetail) {
   $scope.items = basketDetail.items;
}


<div ng-controller="FooCtrl">
  {{items.basketCount}}
</div>
<div ng-controller="BarCtrl">
  {{items.basketCount}}
</div>

これが機能するのは、両方のコントローラーの $scope が同じオブジェクトへの参照を保持しているためです。これは、basketDetail サービスによって保持されます。繰り返しますが、これは実際には推奨される方法ではありません。

それはすべて言った：$rootScope、IMOはあなたが探しているものである可能性が最も高い.

  • 追加のコントローラーを作成する必要はありません。
  • 追加の関数参照を作成する必要はありません。
  • 追加の親/子スコープのネストおよび後続の監視は作成されません。
于 2013-01-30T16:06:19.117 に答える
2

の本当の必要はありません$rootScope。RootControllerスコープに関数を含む親コントローラー（例）を作成します。子スコープは自動的にそれを継承します。

<div id="container" ng-controller="RootController">
...


function RootController($scope) {
   $scope.item = {};

   $scope.setBasketCount = function (detail) {
      $scope.item.basketCount = detail.getCount();
   }
}

詳細コントローラでは、次のsetBasketCount()関数を使用するだけです。

function DetailController($scope, item, basketDetail) {
    $scope.item = item;
    $scope.setBasketCount(basketDetail);

    //more code
}
于 2013-01-30T18:06:45.303 に答える