Question

我有一个工作正常的控制器，但似乎应该重构为包含服务。

我的控制器使用两个功能来更改成分的显示。一个绑定到移动的选择元素，另一个绑定到桌面的链接。

是否可以重构此服务以使用服务？

My html for Mobile：

<select ng-model="ingredient.item" ng-options="i.option for i in ingredient.items" ng-change="ingredient.change_select(ingredient.item)">
    <option value="">choose ingredient</option>
</select>

我的桌面html：

<a ng-click="ingredient.change_tab('octopamine','Octopamine')">Octopamine</a>

我的控制器：

app.controller('IngredientsCtrl', function() {
  var ingredient = this;

  ingredient.items = [
    {
      'option': 'Brigham\'s Tea Leaf',
      'param' : 'brighamtea'
    },
    {
      'option': 'White Willow Bark Powder',
      'param' : 'white_willow'
    }];

  ingredient.tab = 'brighamtea';
  ingredient.tab_image = 'http://imgix.ximo365.com/brighamtea.jpg';
  ingredient.tab_title = 'Brigham\'s Tea Leaf';

  ingredient.change_select = function (item) {
    ingredient.tab = item.param;
    ingredient.tab_image = 'http://imgix.ximo365.com/' + item.param + '.jpg';
    ingredient.tab_title = item.option;
  }

  ingredient.change_tab = function(param,title) {
    ingredient.tab = param;
    ingredient.tab_image = 'http://imgix.ximo365.com/' + param + '.jpg';
    ingredient.tab_title = title;
  }
});

Answer 1

绝对

创建工厂/服务，例如：IngredientsService

使用依赖注入在控制器中引入此服务。

//示例

app.controller('IngredientsCtrl'), function(IngredientsService) {
    // Create reusable service methods
    IngredientsService.change_select(item);
    IngredientsService.change_tab(param, title);
});

如果您在其他控制器，指令或服务等多个领域使用此功能，您还可以管理服务中的默认项目列表以保持DRY。

使用服务还可以让您单独测试并模拟控制器中的依赖项。

重构控制器使用具有多个功能的角度服务

1 个答案: