AngularJS控制器和rootScope的多次使用
AngularJS控制器和rootScope的多次使用
提问于 2012-11-01 23:28:48
我想在两个分离的HTML元素上使用一个控制器，并在编辑一个元素时使用$rootScope来保持两个列表的同步：
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();
}当页面加载时，UL和DIV都会显示数据库中的正确内容，但是当我使用addNewItem()方法时，只有DIV会更新。
有没有更好的方法来组织我的逻辑，或者我可以做些什么来确保UL中的$scope.menu同时更新？
下面是一个类似的例子：http://plnkr.co/edit/2a55gq
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-11-02 00:14:01
我建议使用包含菜单及其方法的服务。该服务将更新控制器所引用的菜单。
在这里可以看到一个有效的柱塞：http://plnkr.co/edit/Bzjruq
以下是示例JavaScript代码：
angular
.module( 'sampleApp', [] )
.service( 'MenuService', [ '$rootScope', function( $rootScope ) {
return {
menu: [ 'item 1' ],
add: function( item ) {
this.menu.push( item );
}
};
}])
.controller( 'ControllerA', [ 'MenuService', '$scope', function( MenuService, $scope ) {
$scope.menu = MenuService.menu;
$scope.addItem = function() {
MenuService.add( $scope.newItem );
};
}]);和示例Html页面：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="sampleApp">
<div ng-controller="ControllerA">
<ul>
<li ng-repeat="item in menu">{{item}}</li>
</ul>
<input type="text" ng-model="newItem" /><input type="submit" ng-click="addItem()" />
</div>
<div ng-controller="ControllerA">
<ul>
<li ng-repeat="item in menu">{{item}}</li>
</ul>
</div>
</body>
</html>Stack Overflow用户
发布于 2012-11-01 23:53:07
编辑：
这是更新版本的plunker。它在两个控制器中工作。
主要思想是使用服务和广播来同步数据和指令。
app.service('syncSRV', function ($rootScope) {
"use strict";
this.sync = function (data) {
this.syncData = data;
$rootScope.$broadcast('updated');
};
});
app.controller('MainCtrl1', ['$scope', function ($scope) {
}])
.controller('MainCtrl2', ['$scope', function ($scope) {
}]);
app.directive('sync',function (syncSRV) {
"use strict";
return {
template: '<div><input ng-model="syncdata" type="text" /></div> ',
controller: function ($scope, $element, $attrs) {
$scope.$watch('syncdata', function (newVal, oldVal, $scope) {
syncSRV.sync(newVal);
}, true);
}
};
}).directive('dataview', function (syncSRV) {
"use strict";
return {
template: '<div>Sync data : {{data}}</div> ',
controller: function ($scope, $element, $attrs) {
$scope.$on('updated', function () {
$scope.data = syncSRV.syncData;
});
}
};
});
<div ng-controller="MainCtrl1">
<fieldset>
<legend> Controller 1</legend>
<div dataview></div>
<div sync></div>
</fieldset>
</div>
<div ng-controller="MainCtrl2">
<fieldset>
<legend> Controller 2</legend>
<div dataview></div>
<div sync></div>
</fieldset>
</div>以下是我在这种情况下会做的事情。
我将为以下对象创建一个指令
<ul class="nav" ng-controller="Menu">
<li ng-repeat="item in menu">
<a href="{{item.href}}">{{item.title}}</a>
</li>
</ul> 因此，一旦项被更新，它将在这两个指令中被更新。
Stack Overflow用户
发布于 2013-09-29 21:29:50
我只想更新和简化选择的答案。您似乎可以通过删除这一行来减少这一点：$rootScope.$broadcast( 'MenuService.update', this.menu );
还有这一块：
$scope.$on( 'MenuService.update', function( event, menu ) {
$scope.menu = menu;
});原因是，我们已经在使用一个服务，它基本上绑定了两个相同的控制器，所以不需要使用$rootScope.$broadcast并添加一个可观察对象。
在这里工作：http://plnkr.co/edit/1efEwU?p=preview
您只需要链接服务，当我重构代码时，我能够将其减少到13行，而不是22行。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13180293
复制相关文章
相似问题