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

8 浏览
0 Comments

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

我有一个应用程序,在其中使用ngCart指令来存储添加到购物篮中的物品。问题是,这个指令只能发送用户添加的物品的信息,但我还需要发送一些从表单中获取的信息。

所以为了将它们发送到一个单一的对象中,我首先需要提取存储在指令中的数据到我的主要作用域,然后将其与从表单中获取的数据合并。

为此,我需要修改ngCart.js指令。我尝试创建一个服务,如这里所建议的,但我无法使其工作。我添加到指令中的代码如下:

.service('ngCartData', ['ngCart', function(ngCart){
    return {
        data:ngCart;
    };
 }])

但是,我收到一个错误提示:模块'ngCart'不可用!

我对angular中的服务和工厂完全陌生,所以我不知道具体在哪里寻找解决方法。我用我的代码创建了一个plunkr(我尝试修改了带有上述代码的ngCart.js文件,但plunkr显示的是未经修改的指令)。我只需要能够发送存储在ngCart作用域中的数据,以便我可以在父控制器中监听它(请参见plunkr中的结账部分)。

非常感谢您的帮助!谢谢!

0
0 Comments

Angular JS - 从指令发送数据到父控制器的问题是由于无法将指令注入到服务中所导致的。必须将服务注入到主控制器和指令中,以便您可以将其用作两者之间的桥梁。服务是单例的,因此如果您修改服务的属性,这些修改将在任何其他要求该服务的地方都可用。

您的服务将如下所示:

.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);
};

以上就是解决这个问题的原因和方法。

0
0 Comments

问题的出现原因是在编辑ngCart模块时可能出现了错误,导致ngCart对Angular不可见。解决方法是注入ngCart到控制器/服务等中,并在需要的地方访问更新后的数据。

以下是解决问题的代码示例:

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

在这个示例中,通过注入ngCart到控制器中,可以访问并输出ngCart的$cart数据。

需要注意的是,通过添加ngCart服务是多余的,数据在任何时候和任何地方都是可访问的。只需将ngCart注入到控制器/服务等中,更新后的数据将对您可用。

此外,还提到了另一个问题:在checkoutdata.html中尝试访问{{ngCart.totalCost()}}时,视图中没有显示任何数据。但这是一个完全不同的问题,首先要解决当前的问题:您能否通过ngCart的数据发送http请求,以及您自定义的数据?

最后,通过在指令中访问ngCart的数据来解决问题,这是更简洁的解决方案。

0
0 Comments

问题出现的原因是未正确加载js文件和模块声明,并且在修复指令中的代码时出现了问题。解决方法是确保正确加载js文件和模块声明。可以参考以下步骤:

1. 确保正确加载js文件,可以使用以下代码:


 或者 ngCart.min.js

2. 在模块声明中正确加载模块,可以使用以下代码:

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

3. 检查修复指令的代码是否正确,并确保文件正确加载。可以通过查看plunkr来确认是否正常工作。

问题的原因是未正确加载js文件和模块声明,并且在修复指令中的代码时出现了问题。解决方法是确保正确加载js文件和模块声明。

0