在 Angular 中共享 strongloop 集合
sharing strongloop collections in Angular
我的应用程序中有两个控制器。一个 MenuController 和一个 LeagueController。 MenuController 存在于主 index.html 页面上。
LeagueController 管理一组 League 特定页面。
当应用程序启动时,MenuController 会通过 restful api 加载所有可用的联赛用户可以快速跳转到它。
我通过由 LeagueController 控制的 create-league.client.view.html 模板创建联赛。
MenuController代码如下:
angular.module('app')
.controller('MenuController',
['$scope', '$state', 'League', function ($scope, $state, League) {
$scope.leagues = [];
function getLeagues() {
League
.find()
.$promise
.then(function (results) {
$scope.leagues = results;
});
}
getLeagues();
}]);
下面是LeagueController
angular.module('app')
.controller('LeagueController', ['$scope', '$state', 'Leagues',
function($scope,$state, League) {
$scope.leagues = [];
$scope.addLeague = function() {
League
.create($scope.newLeague)
.$promise
.then(function(result) {
$scope.newLeague = '';
$scope.leagueForm.name.$setPristine();
$('.focus').focus();
getLeagues();
});
};
function getLeagues() {
League
.find()
.$promise
.then(function(leagues) {
$scope.leagues = leagues;
});
}
getLeagues();
$scope.removeLeague = function(item) {
League
.deleteById(item)
.$promise
.then(function() {
getLeagues();
});
};
}]);
在这两种情况下,我都使用由 运行 生成的 strongloop lb-services.js
lb-ng server/server.js client/js/services/lb-services.js
问题在于,为每个控制器创建的 $scope.leagues 显然是独立的,但当用户创建新联赛时,我无法更新 MenuControllers 联赛数组,因此顶部的下拉列表不会'改变。
我试图创建一个依赖 lb-services.js 文件的服务,但无济于事。
我用谷歌搜索了所有我能找到的在控制器之间共享数据的例子,但我无法让它们中的任何一个工作。任何帮助将不胜感激。我是一名 Java 开发人员,试图掌握 AngularJS 并且正在为 angular 容纳和封装数据的方式而苦苦挣扎。当它正确完成时,我可以看到它是多么有效我只是还没有 'Eureka!!' 那个时刻。
谢谢,
马克.
***************解决方案
大家好,
多亏了下面保罗的帮助,我才能够想出一个解决方案。
我创建了一个 SharedLeagues 服务,其中注入了生成的 League 服务。然后将 SharedLeagues 服务注入到两个控制器中。控制器保留对 SharedLeagues 服务对象本身的引用,而不是底层联赛数组。然后在模板中将 ng-repeat 属性绑定到 SharedLeagues.getLeagues() 方法。
SharedLeagues.service.js
angular.module('app').service('SharedLeagues',函数(联赛){
var leagues= {};
return {
retrieveLeagues: function() {
League
.find()
.$promise
.then(function(foundLeagues) {
leagues = foundLeagues;
});
},
getLeagues: function() {
return leagues;
},
setLeagues: function(leaguesToSet) {
// setter
leagues = leaguesToSet;
}
}
});
MenuController.js 通过在构建时调用后端来初始化 SharedLeagues 底层联赛数组。
angular.module('app')
.controller('MenuController',
['$scope', '$state', 'SharedLeagues', function ($scope, $state, SharedLeagues) {
SharedLeagues.retrieveLeagues();
$scope.SharedLeagues = SharedLeagues;
}]);
LeagueController 有addLeague 和deleteLeague 方法。作为回调的一部分,将调用 SharedLeagues setLeagues 方法,该方法还会更新 MenuController 的绑定。
angular
.module('app')
.controller('LeagueController', ['$scope', '$state', 'SharedLeagues','League', 函数($scope,
$state, SharedLeagues, 联赛) {
$scope.SharedLeagues = SharedLeagues;
$scope.addLeague = function() {
League
.create($scope.newLeague)
.$promise
.then(function(createdLeague) {
$scope.newLeague = '';
$scope.leagueForm.name.$setPristine();
$('.focus').focus();
var leagues = SharedLeagues.getLeagues();
leagues.push(createdLeague)
SharedLeagues.setLeagues(leagues);
});
};
$scope.removeLeague = function(item) {
League
.deleteById(item)
.$promise
.then(function() {
SharedLeagues.retrieveLeagues();
});
};
}]);
联盟视图绑定到SharedLeagues,并列出新建的联盟删除如下
<div class="list-group col-lg-2">
<a class="list-group-item" ng-repeat="league in SharedLeagues.getLeagues()">{{league.name}} at {{league.venue}}
<i class="glyphicon glyphicon-remove pull-right"
ng-click="removeLeague(league)"></i></a>
</div>
Menu 视图绑定到 SharedLeagues,如下所示
<ul class="dropdown-menu">
<li ng-repeat="league in SharedLeagues.getLeagues()"><a href="/edit/{{league.id}}">{{league.name}}</a></li>
<li class="enabled"><a href="/#/leagues/create">Create new League...</a></li>
</ul>
希望这对希望完成类似任务的其他人有所帮助。非常感谢保罗的帮助!
马克.
服务是在两个控制器之间共享数据的好方法,下面是一个工作原理示例:
创建服务:
app.service('SharedData', function() {
var data = [1,2,3,4,5,6];
return {
getData: function() {
// getter
return data;
},
setData: function(toSet) {
// setter
data = toSet;
}
}
});
然后将服务注入到您的两个控制器中:
app.controller('yourCtrl', function($scope, SharedData) {
...
然后您可以 get/set 来自任一控制器的数据,它会反映在另一个控制器中:
// in the controller
...
SharedData.setData('somevalue');
var someVal = SharedData.getData();
...
下面是这个想法的一个基本工作示例:http://plnkr.co/edit/Yt2t6D7P29ytCm4tyQn9?p=preview
我的应用程序中有两个控制器。一个 MenuController 和一个 LeagueController。 MenuController 存在于主 index.html 页面上。 LeagueController 管理一组 League 特定页面。
当应用程序启动时,MenuController 会通过 restful api 加载所有可用的联赛用户可以快速跳转到它。
我通过由 LeagueController 控制的 create-league.client.view.html 模板创建联赛。
MenuController代码如下:
angular.module('app')
.controller('MenuController',
['$scope', '$state', 'League', function ($scope, $state, League) {
$scope.leagues = [];
function getLeagues() {
League
.find()
.$promise
.then(function (results) {
$scope.leagues = results;
});
}
getLeagues();
}]);
下面是LeagueController
angular.module('app')
.controller('LeagueController', ['$scope', '$state', 'Leagues',
function($scope,$state, League) {
$scope.leagues = [];
$scope.addLeague = function() {
League
.create($scope.newLeague)
.$promise
.then(function(result) {
$scope.newLeague = '';
$scope.leagueForm.name.$setPristine();
$('.focus').focus();
getLeagues();
});
};
function getLeagues() {
League
.find()
.$promise
.then(function(leagues) {
$scope.leagues = leagues;
});
}
getLeagues();
$scope.removeLeague = function(item) {
League
.deleteById(item)
.$promise
.then(function() {
getLeagues();
});
};
}]);
在这两种情况下,我都使用由 运行 生成的 strongloop lb-services.js lb-ng server/server.js client/js/services/lb-services.js
问题在于,为每个控制器创建的 $scope.leagues 显然是独立的,但当用户创建新联赛时,我无法更新 MenuControllers 联赛数组,因此顶部的下拉列表不会'改变。
我试图创建一个依赖 lb-services.js 文件的服务,但无济于事。
我用谷歌搜索了所有我能找到的在控制器之间共享数据的例子,但我无法让它们中的任何一个工作。任何帮助将不胜感激。我是一名 Java 开发人员,试图掌握 AngularJS 并且正在为 angular 容纳和封装数据的方式而苦苦挣扎。当它正确完成时,我可以看到它是多么有效我只是还没有 'Eureka!!' 那个时刻。
谢谢, 马克.
***************解决方案 大家好, 多亏了下面保罗的帮助,我才能够想出一个解决方案。
我创建了一个 SharedLeagues 服务,其中注入了生成的 League 服务。然后将 SharedLeagues 服务注入到两个控制器中。控制器保留对 SharedLeagues 服务对象本身的引用,而不是底层联赛数组。然后在模板中将 ng-repeat 属性绑定到 SharedLeagues.getLeagues() 方法。
SharedLeagues.service.js angular.module('app').service('SharedLeagues',函数(联赛){
var leagues= {};
return {
retrieveLeagues: function() {
League
.find()
.$promise
.then(function(foundLeagues) {
leagues = foundLeagues;
});
},
getLeagues: function() {
return leagues;
},
setLeagues: function(leaguesToSet) {
// setter
leagues = leaguesToSet;
}
}
});
MenuController.js 通过在构建时调用后端来初始化 SharedLeagues 底层联赛数组。
angular.module('app')
.controller('MenuController',
['$scope', '$state', 'SharedLeagues', function ($scope, $state, SharedLeagues) {
SharedLeagues.retrieveLeagues();
$scope.SharedLeagues = SharedLeagues;
}]);
LeagueController 有addLeague 和deleteLeague 方法。作为回调的一部分,将调用 SharedLeagues setLeagues 方法,该方法还会更新 MenuController 的绑定。
angular .module('app') .controller('LeagueController', ['$scope', '$state', 'SharedLeagues','League', 函数($scope, $state, SharedLeagues, 联赛) {
$scope.SharedLeagues = SharedLeagues;
$scope.addLeague = function() {
League
.create($scope.newLeague)
.$promise
.then(function(createdLeague) {
$scope.newLeague = '';
$scope.leagueForm.name.$setPristine();
$('.focus').focus();
var leagues = SharedLeagues.getLeagues();
leagues.push(createdLeague)
SharedLeagues.setLeagues(leagues);
});
};
$scope.removeLeague = function(item) {
League
.deleteById(item)
.$promise
.then(function() {
SharedLeagues.retrieveLeagues();
});
};
}]);
联盟视图绑定到SharedLeagues,并列出新建的联盟删除如下
<div class="list-group col-lg-2">
<a class="list-group-item" ng-repeat="league in SharedLeagues.getLeagues()">{{league.name}} at {{league.venue}}
<i class="glyphicon glyphicon-remove pull-right"
ng-click="removeLeague(league)"></i></a>
</div>
Menu 视图绑定到 SharedLeagues,如下所示
<ul class="dropdown-menu">
<li ng-repeat="league in SharedLeagues.getLeagues()"><a href="/edit/{{league.id}}">{{league.name}}</a></li>
<li class="enabled"><a href="/#/leagues/create">Create new League...</a></li>
</ul>
希望这对希望完成类似任务的其他人有所帮助。非常感谢保罗的帮助!
马克.
服务是在两个控制器之间共享数据的好方法,下面是一个工作原理示例:
创建服务:
app.service('SharedData', function() {
var data = [1,2,3,4,5,6];
return {
getData: function() {
// getter
return data;
},
setData: function(toSet) {
// setter
data = toSet;
}
}
});
然后将服务注入到您的两个控制器中:
app.controller('yourCtrl', function($scope, SharedData) {
...
然后您可以 get/set 来自任一控制器的数据,它会反映在另一个控制器中:
// in the controller
...
SharedData.setData('somevalue');
var someVal = SharedData.getData();
...
下面是这个想法的一个基本工作示例:http://plnkr.co/edit/Yt2t6D7P29ytCm4tyQn9?p=preview