无法通过ng-click将数据传递给指令

时间:2017-08-22 11:52:14

标签: javascript angularjs

我一直在使用Angular的components,虽然我已将ngCart注入到使用directives的应用中。我需要使用ngCart的checkout()函数从表单(结算明细)传递数据,这样我就可以在单个JSON中包含结算明细和交易详细信息以发送到后端。

我将结算对象作为checkout()函数的参数传递,但它记录为未定义。如果我将对象更改为字符串,它会记录到ngcartCheckout指令,因此从对象收集数据时会出现问题。

问题

为什么对象未能传递给ngcartCheckout指令?

<div>
   <input ng-model="foo.name">
   <input ng-model="foo.sname">
</div>

<div ng-if="service=='http' || service == 'log'">
    <button ng-click="checkout(foo)">Checkout</button>
</div>
.directive('ngcartCheckout', [function(){
        return {
            restrict : 'E',
            controller : ('CartController', ['$rootScope', '$scope', 'ngCart', 'fulfilmentProvider', function($rootScope, $scope, ngCart, fulfilmentProvider) {
                $scope.ngCart = ngCart;

                $scope.checkout = function (foo) {
                    console.log(foo)
                }
            }]),
            scope: {
                service:'@', //REMOVED FROM TEMPLATE AS NOT RELEVANT
                settings:'=' //REMOVED FROM TEMPLATE AS NOT RELEVANT
            },
            transclude: true,
            templateUrl: function(element, attrs) {
               if ( typeof attrs.templateUrl == 'undefined' ) {
                  return 'p3sweb/app/components/checkout/views/ngCart/checkout.htm';
               } else {
                   return attrs.templateUrl;
               }
            }
        };
    }]);

1 个答案:

答案 0 :(得分:0)

永远不会声明

foo(至少在你的例子中没有)添加

$scope.foo = {};

以上

$scope.ngCart = ngCart;

现在它会吐出一个空对象,如果你想让它分配名称和sname到foo你需要将p标签更改为输入并在输入中输入名称

<input ng-model="foo.name">