角度控制器組織和ui路由器

我想做一個簡單的列表顯示，但我有一些關於控制器組織。角度控制器組織和ui路由器

在我的申請中，我有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>

來源

2015-11-28 Hammerbot

這是可能是利用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都需要它 - 前者實際上呈現列表，後者則修改其內容。我上面描述的方法可以讓您將數據（列表本身）從演示文稿/用戶界面交互中分離出來。

[編輯]

同樣的，如果你想有一個按鈕，讓您在您的兩個意見添加新項，可以創建一個接收ListService和點擊時提示用模式的用戶指令。

來源

2015-11-28 01:28:49 cmw

感謝您向我展示我的服務，我不知道這一點，但我不確定這是否適合，因爲如果我的「+」按鈕同時位於第一個視圖和第二個視圖內，這將適合。就我而言，該按鈕位於'ui-view'之外的根文件中。我用HTML'index.html'文件編輯了這個問題。告訴我，如果我錯了 – Hammerbot

啊，我明白了。你也可以將ListService注入到MainCtrl中，這不會有問題。最終，這與最初的解決方案並沒有太大的不同。 – cmw

是的，我認爲這就是我要做的事情，把我的'$ scope.items'放在'MainCtrl'中，我猜如果我在我的應用程序的頂部需要一個'+'，這足以考慮'項目「作爲」主要數據「的一部分，感謝您的建議！ – Hammerbot

角度控制器組織和ui路由器

回答

相關問題