角度JS - ディレクティブから親コントローラへのデータの送信

Question

バスケットに追加されたアイテムを格納するためにngCart指示を使用するアプリケーションがあります。問題は、このディレクティブはユーザーが追加したアイテムに関する情報を送信する機能を持っているだけですが、フォームから取得する情報も送信する必要があることです。

これを単一のオブジェクトで送信するには、まず、そのディレクティブに格納されているデータをメインスコープに抽出し、フォームから取得したデータとマージします。

そのためには、ngCart.jsディレクティブを変更する必要があります。私はhereというアドバイスをしてサービスを作ろうとしましたが、それを働かせることはできません。私はディレクティブに追加されたコードは、この

.service('ngCartData', ['ngCart', function(ngCart){ 

    return { 
     data:ngCart; 
    }; 

}]) 

ですが、私は、私は、角度でのサービスや工場への全く新しいので、私は正確にどこを見れするかわからないModule 'ngCart' is not available!

を言ってエラーが出ますそれを機能させる。私はplunkrを私のコードで作った（上記のコードでngCart.jsファイルを修正しようとしましたが、plunkrは変更を加えずに指示文を示しています）。私はちょうど親コントローラでそれを聞くことができるように、スコープngCartでディレクティブに格納されたデータを送信できる必要があります（plunkrのcheckoutセクションを参照）。

任意の助けもいただければ幸いです。ありがとう！

<script src="pathto/angular/angular.js"></script> 
<script src="pathto/ngCart.js"></script> or ngCart.min.js 

は、あなたがこのようなあなたの宣言モジュールにモジュールをロードしました：

Answer 1

あなたは正しいアイデアを念頭に置いていましたが、私はそれがあなたのためにはうまくいかなかったのに驚いています。

私は（script.js中）

app.controller('myCtrl', function($scope, ngCart, myCart) { 
    $scope.names = [...]; 
    ... 
    console.log(myCart.cart); 
}) 
    .factory('myCart',function(ngCart){ 
     return { 
      cart: ngCart.$cart 
     }; 
}) 

次のようにあなたのアプリケーションを編集した、それは私はあなたが（それがログに記録する前に、私は2つの項目を追加しました）必要なものだと思う{shipping: 30, taxRate: null, tax: null, items: Array[2]}を、ログに記録。

サービスの追加は冗長であることに注意してください。いつでもどこでもデータにアクセスできます。 ngCartをコントローラ/サービス/ etcに注入するだけです。更新されたデータが利用可能になります。

したがって、次のコードは同等です：

app.controller('myCtrl', function($scope, ngCart) { 
     $scope.names = [...]; 
     ... 
     console.log(ngCart.$cart); 
    }); 

あなたが得たエラーがngCartモジュールを編集しているとき、あなたは（タイプミスのような）エラーのいくつかの並べ替えを持っていた、ということかもしれません取得するための可能な理由、それはngCartが角度に見えないことにつながった。

Answer 2

あなたは、このようなJSファイルをロードしたのですか？ ：

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

Answer 3

あなたは実際にこれを後方に持っています。ディレクティブをサービスに挿入することはできません。サービスをメインコントローラとディレクティブに挿入して、2つのブリッジの間のブリッジとして使用できるようにする必要があります。サービスはシングルトンなので、サービスのプロパティを変更した場合は、その変更が要求されている場所で利用できるようになります。私がいることを修正するときに問題がちょうど生じ、

$scope.someData = ngCartData.getData(); 
$scope.someFunction = function(dataToStore){ 
    ngCartData.addData(dataToStore); 
};