1

あるコントローラーから別のコントローラーにデータを送信しようとしていますが、成功しません。Angular サービスを使用して Stack Overflow で見つかったすべてのアイデアを試しましたが、コードの何が問題なのかわかりません。

いくつかのアイテムをリストする最初のコントローラーがあります (CartSidebarCtrl)。リストからアイテムを削除する機能もあります。

アイテムの数を表示する別のコントローラーがあります (TopCartCtrl)。

ページの読み込み時に、2 番目のコントローラーが正しい数のアイテムを表示します。しかし、最初のコントローラーでいくつかの項目を削除すると、2 番目のコントローラーは更新されません。

ここで何が間違っていますか？

HTML コード:

<div ng-controller="CartSidebarCtrl">
    <ul>
        <li ng-repeat="product in products">
            {{product.name}} (<span style="color: blue; cursor: pointer" ng-click="remove($index)">Remove</span>)
        </li>
    </ul>
</div>

<div ng-controller="TopCartCtrl">
    <span>{{topCartText}}</span>
</div>

角度コード:

magentoApp.factory('cartModel', function () {
    var cartModel = {};

    cartModel.updateProducts = function(products) {
        cartModel.products = products;
    };

    return cartModel;
});

magentoApp.controller('CartSidebarCtrl', ['$scope', '$http', 'cartModel', function($scope, $http, cartModel) {
    $scope.products = [
        { name: 'Product 1' },
        { name: 'Product 2' }
    ];

    $scope.remove = function($index) {
        $scope.products.splice($index, 1);
        updateTopCart();
    }

    updateTopCart = function() {
        cartModel.updateProducts($scope.products);
    }

    updateTopCart();
}]);

magentoApp.controller('TopCartCtrl', ['$scope', 'cartModel', function($scope, cartModel) {
    $scope.topCartText = cartModel.products.length;
}]);

[更新されたコードの動作で編集]

「m59」と「Jesus Rodriguez」で言及されているように、オブジェクト参照が正しくないという事実に加えて、cartModel.products で .length を呼び出していました。同じ理由で、私のテンプレートは更新されませんでした。私の解決策は、製品オブジェクトをテンプレートに渡し、このテンプレートで .length を呼び出すことです。次に、products.length に基づいて別のテキストを表示したいと考え、カスタム フィルターを作成してこれを機能させました。

これが正しいコードです。

HTML:

<div ng-controller="TopCartCtrl">
    <span>{{products.length | topCartFilter}}</span>
</div>

<div ng-controller="CartSidebarCtrl">
    <ul>
        <li ng-repeat="product in products">
            {{product.name}} (<span style="color: blue; cursor: pointer" ng-click="remove($index)">Remove</span>)
        </li>
    </ul>
</div>

角度:

magentoApp.factory('cartModel', function() {
    var cartModel = {
        products: [
            { name: 'Product 1' },
            { name: 'Product 2' }
        ]
    };
    return cartModel;
});

magentoApp.filter('topCartFilter', function() {
    return function(productsCount) {
        return (productsCount > 0) ? 'You have ' + productsCount + ' items in your cart': 'Your cart is empty';
    };
});

magentoApp.controller('TopCartCtrl', ['$scope', 'cartModel', function($scope, cartModel) {
    $scope.products = cartModel.products;
}]);

magentoApp.controller('CartSidebarCtrl', ['$scope', 'cartModel', function($scope, cartModel) {
    $scope.products = cartModel.products;

    $scope.remove = function($index) {
        $scope.products.splice($index, 1);
    }
}]);
4

1 に答える 1

1

ここですでに回答したことを思い出しました: How to share data between controllers in angularjs

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

app.factory('myService', function() {
  var myService = {
    foo: 'bar'
  };
  return myService;
});

app.controller('myCtrl1', function(myService) {
  console.log(myService.foo);
  myService.foo = 'not bar anymore!';
});

app.controller('myCtrl2', function(myService) {
  console.log(myService.foo);
});

あなたがする必要がある唯一のことは、あなた$scope.cartModel = cartModelを設定することです。そして、ng-model="cartModel.someProp"そこにある変更は、サービス内のそのプロパティを更新し$scope.cartModel、サービスオブジェクトを参照しているすべてのものに更新することです。

于 2013-09-07T00:04:28.970 に答える