Question

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

在我的申请中，我有2个州，items和state2。在items中，我想显示一个项目列表，以及＆＃34;其他内容＆＃34;在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，如下：

{
  "aggs": {
    "my_aggs": {
      "terms": {
        "field": "my_name",
        "size": 10
      },
      "aggs": {
        "include_original": {
          "top_hits": {
            "size": 1,
            "_source": {
              "include": "my_name"
            }
          }
        }
      }
    }
  },
  "size": 0
}

然后，您可以在需要访问数据本身的任何位置注入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都需要它 - 前者实际呈现列表，后者修改其内容。我上面描述的方法允许您将数据（列表本身）与表示/ UI交互分开。

[编辑]

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

角度控制器组织和ui-router

1 个答案: