Question

我正在追寻一本有角度的书。在一章中，它展示了如何使用指令：

angular.module("cart", [])
.factory("cart", function() {
    var cartData = [];

    return {
        addProduct: function(id, name, price) {
            var addedToExistingItem = false;
            for (var i = 0; i < cartData.length; i++) {
                if (cartData[i].id == id) {
                    cartData[i].count++;
                    addedToExistingItem = true;
                    break;
                }
            }

            if (!addedToExistingItem) {
                cartData.push({
                    count: 1, id: id, price: price, name: name
                });
            }
        },

        removeProduct: function(id) {
            for (var i = 0; i < cartData.length; i++) {
                if (cartData[i].id == id) {
                    cartData.splice(i, 1);
                    break;
                }
            }
        },

        getProducts: function() {
            return cartData;
        }
    }
})
.directive("cartSummary", function(cart) {
    return {
        restrict: "E",
        templateUrl: "components/cart/cartSummary.html",
        controller: function ($scope) {
            var cartData = cart.getProducts();

            $scope.total = function() {
                var total = 0;
                for (var i = 0; i < cartData.length; i++) {
                    total += (cartData[i].price * cartData[i].count);
                }

                return total;
            }

            $scope.itemCount = function() {
                var total = 0;
                for (var i = 0; i < cartData.length; i++) {
                    total += cartData[i].count;
                }

                return total;
            }
        }

    }
});

在cartSummary.html中，它显示了如何使用itemCount和total：

<style>
    .navbar-right { float: right !important; margin-right: 5px;}
    .navbar-text { margin-right: 10px;}
</style>

<div class="navbar-right">
    <div class="navbar-text">
        <b>Your cart:</b>
        {{itemCount()}} item(s),
        {{total() | currency}}
    </div>
    <a class="btn btn-default navbar-btn">Checkout</a>
</div>

我的印象是，当我在控制器中定义范围变量时，我可以使用双括号在视图中渲染值。但是，看起来像指令中的控制器看起来不同。它需要a（）才能呈现范围变量值。

我只是想知道这背后的魔力是什么？

感谢。

Answer 1

()是函数调用。因此，如果您想要从函数中呈现响应，它将如下所示：

{{ function() }}

如果要渲染值，它将如下所示：

{{ value }}

在我看来，绑定值的最佳方法是使用ng-bind：

<div ng-bind="value"></div>
<div ng-bind="function()"></div>

因为这可以避免FOUC（无格式内容的闪现），在角度绑定值之前，您可能会看到{{ value }}渲染几秒钟。

希望这有帮助。

AngularJS：为什么范围变量用法在指令和常规控制器中有所不同？

1 个答案: