使用共享控制器來處理常見的html行爲

我是angularjs的新手，所以我有一個問題給你。在我的「標準html模板」中，我爲購物車摘要提供了一些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方法。

來源

2015-08-03 DevT

我們不在乎你是否是新手，而且我們已經知道你有一個問題ñ。所以不需要包含第一句話請 – musefan

你看過使用'driectives'嗎？ - https://docs.angularjs.org/guide/directive –

以角度定義通用代碼的最簡單方法是通過服務。 –

是的，你可以通過使用角度的服務輕鬆共享功能/通用的代碼，但我想分享的功能/通用代碼只有你的問題的一半，因爲你注意到你需要分享「常見的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，它的一切通過指令渲染，然後你可以使用如下指令：