Question

使用AngularJS构建Shpping Cart。

我在JSFiddle上编写了来自用户的代码。

JS： -

function CartForm($scope) {
$scope.invoice = {
    items: [{
        qty: 10,
        description: 'item',
        cost: 9.95}]
};

$scope.addItem = function() {
    $scope.invoice.items.push({
        qty: 1,
        description: '',
        cost: 0
    });
},

$scope.removeItem = function(index) {
    $scope.invoice.items.splice(index, 1);
},

$scope.total = function() {
    var total = 0;
    angular.forEach($scope.invoice.items, function(item) {
        total += item.qty * item.cost;
    })

    return total;
}
}

HTML

<h2>Shopping Card Example</h2>
<div ng:controller="CartForm">
<table class="table">
    <tr>

        <th>Description</th>
        <th>Qty</th>
        <th>Cost</th>
        <th>Total</th>
        <th></th>
    </tr>
    <tr ng:repeat="item in invoice.items">
        <td><input  type="text" ng:model="item.description"class="input-small"     readonly="readonly"></td>           
        <td><input type="number" ng:model="item.qty" ng:required class="input-mini">    </td>
        <td><input type="number" ng:model="item.cost" ng:required class="input-mini"     readonly="readonly"></td>
        <td>{{item.qty * item.cost | currency}}</td>
        <td>
            [<a href ng:click="removeItem($index)">X</a>]
        </td>
    </tr>
    <tr>
        <td><a href ng:click="addItem()" class="btn btn-small">add item</a></td>
        <td></td>
        <td>Total:</td>
        <td>{{total() | currency}}</td>
    </tr>
</table>
</div>

我希望在表格外添加项目。如何在上面的HTML代码片段外部访问addItem函数。

JS小提琴http://jsfiddle.net/slav123/75m7e/

Answer 1

您的问题与范围可见性有关：您在CartForm范围内定义购物车登录，并且您希望从该范围外部访问该逻辑。
有几种方法可以做到这一点：

你总是可以采取令人讨厌的方式：将任何全局功能固定到$rootScope，以使它们在整个应用中都可见：

function CartForm($scope, $rootScope) { 
   // ...
   $rootScope.addItem = $scope.addItem;
}

或者您可以尝试更清洁的方式：您应该将购物车功能打包成一个共享服务，您可以随时随地注入：

app.factory('CartService', function() {
    // some cart logic here

    // return your cart api
    return {
       addItem: function() {/*...*/}
    }
});

将yor cart逻辑定义为工厂后，只需将其作为依赖项注入即可随意使用：

app.controller('MyPageCtrl', function($scope, CartService) {
    $scope.cart = CartService;
});

并在视图中使用该功能：

<a href ng:click="cart.addItem()" class="btn btn-small">add item</a>

AngularJS： - 调用函数查询

1 个答案: