Javascript 使用共享控制器处理常见的html行为

我是angularjs的新手，所以我有个问题要问你。 在我的“标准html模板”中，我有一些用于购物车摘要的html，这些html位于所有页面上（就像一个弹出窗口，用于快速管理购物车）。所以我想使用一个共享控件来处理常见的html片段，比如：

app.controller ('SharedCtrl', function ($ brooms, cartService) {
    ...
    $ scope.cart = myBagService.get(); // get items from local store
    $scope.removeCartItem = function(key){
        myBagService.remove(key){..}; //remove stored item
        myBagService.add(item){..}; //store item
        $scope.cart = myBag.get(); //update binding items
    }
    ...
}

这是完成这项任务的正确方法吗？

---

如果是，如何从其他控制器调用上述方法？例如，在产品详细信息页面上，我必须调用add方法。

有很多方法可以做到这一点。希望这将有助于找到正确的方法

您还可以阅读以下内容：

---

是的，您可以通过使用angular services轻松共享函数/通用代码，但我认为共享函数/通用代码只是您问题的一半，正如您指出的，您需要共享“通用html片段”，因此为什么不使用

指令

：

(function () {
   'use strict';
    app.directive('shoppingCart', function () {
        return {
            restrict: 'E',
            controller: 'ShoppingCartController as vm',            
            template: function (element, attrs) {
            return '<div data-ng-click="vm.onViewShpooingCart()">Click here to view shopping cart</div>';
            }
        };
    });
})();

共享服务：

(function () {
   'use strict';
    app.services.factory('sharedService', [function () {
        var service = {
           fetchShppingCart: fetchShppingCart
        };

        return service;

        function fetchShppingCart() {
            //code to fetch shopping cart
        }
    }]);
})();

通过这样做，您不会在每个页面上重复您的购物车html，它全部通过指令呈现，然后您可以使用如下指令：

<shopping-cart></shopping-cart>

我们不在乎您是否是新手，我们已经知道您有问题。所以根本不需要包括第一句话。你看过使用

驱动词了吗在angular中定义公共代码的最简单方法是通过服务。
<shopping-cart></shopping-cart>