Angular 控制器组织和 ui-router

Question

我正在尝试制作一个简单的列表显示，但我对控制器的组织有些担忧。

在我的应用程序中，我有 2 个状态，items 和 state2。在items 中，我想在state2 中显示项目列表和“其他”。

但我的应用程序顶部还有一个+ 按钮，可以将项目添加到我的列表中。我希望该按钮在两种状态下都显示。这是一个插图：

现在，我想将我的items 相关函数放在特定的控制器ItemsCtrl 中。所以这将是我的路线：

myApp.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise("/items");
  $stateProvider
    .state('items', {
      url: "/items",
      templateUrl: "partials/items.html",
      controller: "ItemsCtrl"
    })
    .state('state2', {
      url: "/state2",
      templateUrl: "partials/state2.html",
      controller: "State2Ctrl"
    });
});

这将是我的ItemsCtrl：

myApp.controller('ItemsCtrl',function($scope){
  $scope.items = ["One",'Two'];
})

现在，我创建了一个新的MainCtrl 来处理应该出现在任何页面上的+ 按钮：

myApp.controller('MainCtrl',function($scope){
  $scope.promptItem = function(){
    var result = prompt('Add Item', 'New Item', ['ok'], 'Zero');
    $scope.items.push(result.input1); //This line doesn't work
  }
})

这种界面的最佳组织是什么？我真的需要把我的$scope.items 放在我的MainCtrl 中吗？

我宁愿不这样做，我认为最好的办法甚至是将promptItem 函数放在ItemsCtrl 中，你怎么看？

非常感谢您的回答，我对这个世界完全陌生:)

编辑：这是我的 HTML 结构，我的 + 按钮在根文件中：

<button ng-click="promptProduct()">Add Item</button>
<a ui-sref="state1">State 1</a>
<a ui-sref="state2">State 2</a>
<div ui-view></div>

Answer 1

这可能是利用 Angular 服务的好地方。据我了解，问题在于您正在努力在应用程序的不同部分之间共享状态。我建议创建，例如一个 ListService，例如：

myApp.service('ListService', ListService);

function ListService () {
  this.list = ['One', 'Two'];
}
ListService.prototype = {
  addItemToList: function (newThing) {
    var item = // some initialization of an item from the passed value
    this.list.push(item);
  }
};

然后，您可以在任何需要访问数据本身的地方注入 ListService。列表视图和state2 都需要它——前者实际呈现列表，后者修改其内容。我上面描述的方法可以让您将数据（列表本身）与演示/UI 交互分开。

[编辑]

同样，如果您想要一个让您在两个视图中添加新项目的按钮，您可以创建一个接收 ListService 并在单击时以模式提示用户的指令。