Question

我是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方法。

Answer 1

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

http://fdietz.github.io/recipes-with-angular-js/controllers/sharing-code-between-controllers-using-services.html

Angularjs sharing methods between controllers

你也可以读到这个： https://docs.angularjs.org/guide/controller

Answer 2

是的，您可以使用角度服务轻松共享函数/公共代码，但我认为共享函数/公共代码只是问题的一半，因为您注意到您需要共享“常见的html片段”，因此为什么不使用directive：

(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.controller('ShoppingCartController', ['$scope', 'sharedService'], function ($scope, sharedService) {
           var self = this;
           self.onViewShpooingCart = function () {
           sharedService.fetchShppingCart();
         };
    });
})();

共享服务：

(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>

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

2 个答案: