angularjs - 将项目添加到购物车指令表单 Controller

Question

我的 Controller 中有以下功能:

$scope.items = [];

$scope.addToCart = function(data, $index) {

    ticketService.addToCart(data, $index)
        .success(function(data, status, headers, config) {
            var item = {
                ticket_id: $scope.eventInfo.id,
                ticket_no: $scope.ticketTypes[0].ticket_no,
                ticket_type: 'event',
                ticket_desc: $scope.eventInfo.event_name,
                ticket_class: $scope.ticketTypes[0].fee_cat_desc,
                ticket_price: $scope.ticketTypes[0].event_fee,
                ticket_date: $scope.eventInfo.event_date,
                ticket_time: $scope.eventInfo.event_time,
                ticket_venue: $scope.eventInfo.event_venue,
                ticket_key: data.responseData
            }

            $scope.items.push(item);
        })
        .error(function(data, status, headers, config) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
            //alert(data);
        });
}

这是我的服务:

angular.module('vendor').service('ticketService', ['$http', '$rootScope', function($http, $rootScope) {
    var addToCart = function(data, $index) {
        var req = {
            method: 'POST',
            url: '/api/v1/cart',
            headers: {
                'X-XSRF-Token': $("meta[name='csrf_token']").attr("content")
            },
            data: data,
            cache: true
        }

        return $http(req)
    }

    return {
        addToCart: addToCart
    };

}]);

现在，当用户单击一个按钮时，它会执行此“addToCart”函数，该函数会将数据发布到服务器，如果数据处理成功，它会返回 true。现在我想将发布到服务器的数据添加到我的购物车指令中，我一直在尝试但没有得到任何结果。

将我的“项目”对象推送到我的对象数组后，我希望它显示在我的购物车指令中。这是我的购物车指令:

(function() {

    angular.module('vendor').directive('cart', ['$http', '$timeout', 'ticketService', function($http, $timeout, ticketService) {
        return {
            restrict: 'E',
            scope: {
                items: '@'
            },
            templateUrl: '/js/app/templates/cart.html',
            link: function($scope, $element, $attrs) {
                $scope.d = {};
                $scope.d.tickets = {};
                $scope.d.extras = {};

            },
            controllerAs: 'cart'
        }
    }]);

}) ();

Answer 1

如果你真的不需要指令上的隔离/本地作用域，那么就去掉它，指令将继承 Controller 作用域，从而使items成为可能。指令可访问。