AngularJS Controller和rootScope的多种用法
我想对2个单独的HTML元素使用控制器，并使用$ rootScope在编辑一个列表时使2个列表保持同步：
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更新。
有没有更好的方法来组织我的逻辑，或者我可以做一些事情，以确保$scope.menu在UL获取的同时更新？
这是类似的示例：http :
//plnkr.co/edit/2a55gq
问题答案：
我建议使用包含菜单及其方法的服务。该服务将更新控制器引用的菜单。
在此处查看工作正常的pl客：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>
-
本文向大家介绍AnjularJS中$scope和$rootScope的区别小结，包括了AnjularJS中$scope和$rootScope的区别小结的使用技巧和注意事项，需要的朋友参考一下 一句话总结： $rootScope针对全局的作用域生效 $scope只针对当前的controller作用域生效 用下面的例子来证明上述的说法： 定义一个模块名为myApp 创建oneCon
-
问题内容： 以下文件“有效”（它不会引发任何错误）： 但是这个 给出错误： 错误：未知提供程序：modx 源文件中的$ rootScope ：http ://code.angularjs.org/angular-1.0.0rc7.js行：2491 WTF？ 问题答案： 例如，您不能在配置阶段询问-您只能询问提供者。 有关更多信息，请参见http://docs.angularjs.org/guide
-
问题内容： 我在控制器中看到$ scope有$ root，这是什么？与可以注入控制器的$ rootScope有何不同？ 问题答案： var指向所有作用域的父级，可以在任何地方注入。所有其他范围是的子级。它们是通过的方法创建的，因此每个范围都继承自。 在构造函数 的定义中的角度源中有一行： 似乎var只是创建的第一个作用域- 的占位符。 接下来是这段代码在方法： 因此，每个作用域子对象的var 都是
-
问题内容： 我想使用Spring Security保护我的服务层。如文档中所述，我需要使用a 来检查是否允许方法调用。 要确定是否允许给定用户调用服务方法，对我来说影响对调用的方法的必需角色（使用）是不够的，因为这也取决于传递给方法的参数。如文档中所建议，我可以编写一个自定义并通过安全对象访问参数（在这种情况下）。 但是，我的授权逻辑在所有方法中都不同。例如，多个方法之间的参数可能不同，并且授权逻
-
要决定是否允许为给定用户调用服务方法，对被调用的方法影响所需的角色（使用)对我来说是不够的，因为它还取决于传递给方法的参数。正如文档中所建议的，我可以编写一个自定义的并通过安全对象访问参数（在本例中是)。 但是，我的授权逻辑在不同的方法中是不同的。例如，多个方法之间的参数可能不同，授权逻辑也会不同。 我看到两个选择： 我可以在中使用条件逻辑来确定调用的方法和要使用的授权逻辑，但这似乎是一个丑陋的解
-
问题内容： 现在，之间的性能差异和已被淘汰，没有任何理由，更喜欢到？ 他们是不同的，是的。 仅限于范围层次结构（向上）-如果它适合您的设计，这可能很好，但是在我看来，这是一个相当随意的限制。 在所有 选择 收听此活动的人中都有效，这在我看来是一个更为明智的限制。 我想念什么吗？ 编辑： 为了对回答做出澄清，调度的方向不是我要解决的问题。向上调度事件，-向下调度事件。但是，为什么不总是使用它来覆盖所