AngularJS wiele zastosowań kontrolera i rootScope
Chcę użyć kontrolera na 2 oddzielnych elementach HTML i użyć $ rootScope, aby zsynchronizować 2 listy, gdy jedna jest edytowana:
HTML
<ul class="nav" ng-controller="Menu">
<li ng-repeat="item in menu">
<a href="{{item.href}}">{{item.title}}</a>
</li>
</ul>
<div ng-controller="Menu">
<input type="text" id="newItem" value="" />
<input type="submit" ng-click="addItem()" />
<ul class="nav" ng-controller="Menu">
<li ng-repeat="item in menu">
<a href="{{item.href}}">{{item.title}}</a>
</li>
</ul>
</div>
JS
angular.module('menuApp', ['menuServices']).
run(function($rootScope){
$rootScope.menu = [];
});
angular.module('menuServices', ['ngResource']).
factory('MenuData', function ($resource) {
return $resource(
'/tool/menu.cfc',
{
returnFormat: 'json'
},
{
getMenu: {
method: 'GET',
params: {method: 'getMenu'}
},
addItem: {
method: 'GET',
params: {method: 'addItem'}
}
}
);
});
function Menu($scope, MenuData) {
// attempt to add new item
$scope.addNewItem = function(){
var thisItem = $('#newItem').val();
MenuData.addItem({item: thisItem},function(data){
$scope.updateMenu();
});
}
$scope.updateMenu = function() {
MenuData.getMenu({},function(data){
$scope.menu = data.MENU;
});
}
// get menu data
$scope.updateMenu();
}
Gdy strona się ładuje, obaUL
iDIV
wyświetlać poprawną zawartość z bazy danych, ale gdy używamaddNewItem()
metoda tylkoDIV
zostaje zaktualizowany.
Czy jest lepszy sposób na uporządkowanie mojej logiki, czy mogę zrobić coś, aby upewnić się, że$scope.menu
wUL
zostanie zaktualizowany w tym samym czasie?
Oto przykład czegoś podobnego:http://plnkr.co/edit/2a55gq