AngularJS mehrfache Verwendung von Controller und rootScope
Ich möchte einen Controller für zwei separate HTML-Elemente verwenden und mit dem $ rootScope die beiden Listen synchron halten, wenn eines bearbeitet wird:
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();
}
Wenn die Seite geladen wird, werden beideUL
und dasDIV
zeigen Sie den korrekten Inhalt von der Datenbank an, aber wenn ich das benutzeaddNewItem()
Methode nur dieDIV
wird aktualisiert.
Gibt es eine bessere Möglichkeit, meine Logik zu strukturieren, oder kann ich etwas tun, um das sicherzustellen?$scope.menu
in demUL
wird gleichzeitig aktualisiert?
Hier ist ein Beispiel für etwas Ähnliches:http://plnkr.co/edit/2a55gq