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部分）。

非常感谢任何帮助。谢谢！

Answer 1

你是否像这样加载了js文件：

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

你是否在这样的声明模块中加载模块？：

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

Answer 2

你实际上已经落后了。您不能将指令注入服务。您必须将服务注入主控制器和指令中，以便将其用作两者之间的桥梁。服务是单件，因此如果您修改服务的属性，那么这些修改将在其他任何地方提供。您的服务将如下所示：

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

return {
    data:[],
    addData: function(newData){
       this.data.push(newData);  
    },
    getData: function(){
       return this.data;
    }
};

}])

然后在你的控制器和指令中使用ngCartData api，它看起来像这样：

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

Answer 3

你有正确的想法，我很惊讶它不适合你。

我已按以下方式（script.js）

编辑了您的应用

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

并记录{shipping: 30, taxRate: null, tax: null, items: Array[2]}，我认为这就是你所需要的（我在记录之前添加了2个项目）。

请注意，添加服务是多余的;您可以随时随地访问数据。只需将ngCart注入您的控制器/服务/等。并且可以使用更新的数据。

因此，以下代码是等效的：

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

获得错误的一个可能原因可能是，在编辑ngCart模块时，您遇到了某种错误（如拼写错误），导致ngCart不可见角。

Angular JS - 将数据从指令发送到父控制器

3 个答案: