在 Angular 中的控制器之间绑定数据
bind data between controllers in Angular
不确定我是否正确执行此操作。我有两个控制器。一个拉所有帖子。另一个给了我垃圾桶里所有帖子的计数。它目前有效,但只有一种方式。如果我从垃圾桶中撤消帖子并将其放回人口中,则计数会更改以反映新数字,但是如果我将帖子发送到垃圾箱,则计数不会更新。
这是我的服务:
app.service('sharedProperties', function () {
});
这是我的第一个控制器:(该控制器提供所有帖子并具有垃圾功能)
app.controller('postsCtrl', function ($scope, $log, $http, $timeout, Data, $uibModal, sharedProperties) {
Data.get('posts').then(function(data){
$scope.posts = data.data;
$scope.currentPage = 1; //current page
$scope.filteredItems = $scope.posts.length; //Initially for no filter
$scope.totalItems = $scope.posts.length;
$scope.list_pages = [
{
id: '5',
name: '5'
}, {
id: '10',
name: '10'
}, {
id: '20',
name: '20'
}, {
id: '50',
name: '50'
}, {
id: '100',
name: '100'
}
];
$scope.maxSize = 5;
});
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
};
$scope.filter = function() {
$timeout(function() {
$scope.filteredItems = $scope.filtered.length;
}, 10);
};
$scope.sort_by = function(predicate) {
$scope.predicate = predicate;
$scope.reverse = !$scope.reverse;
};
$scope.changePostStatus = function(post){
post.approved = (post.approved=="1" ? "0" : "1");
Data.put("posts/"+post.id,{approved:post.approved}).then(function (result) {
Data.toast2(result);
});
};
$scope.changePostAnnounce = function(post){
post.announce = (post.announce=="1" ? "0" : "1");
Data.put("posts/"+post.id,{announce:post.announce}).then(function (result) {
Data.toast2(result);
});
};
$scope.trashPost = function(post){
if(confirm("Are you sure to remove the post")){
Data.delete("posts/"+post.id).then(function(result){
$scope.posts = _.without($scope.posts, _.findWhere($scope.posts, {id:post.id}));
$scope.totalItems = $scope.posts.length;
Data.toast(result);
});
}
};
$scope.open = function (p,size) {
var modalInstance = $uibModal.open({
templateUrl: 'views/postsEdit.html',
controller: 'postsEditCtrl',
size: size,
resolve: {
item: function () {
return p;
}
}
});
modalInstance.result.then(function(selectedObject) {
if(selectedObject.save == "insert"){
$scope.posts.push(selectedObject);
$scope.posts = $filter('orderBy')($scope.posts, 'id', 'reverse');
}else if(selectedObject.save == "update"){
p.title = selectedObject.title;
// p.price = selectedObject.price;
// p.stock = selectedObject.stock;
// p.packing = selectedObject.packing;
}
});
};
});
这是我的第二个控制器:(这个控制器计算垃圾桶中的帖子)
app.controller('postsTrashCtrl', function ($scope, $log, $http, $timeout, Data, sharedProperties) {
Data.get('trash').then(function(data){
$scope.trash = data.data;
$scope.totalTrashItems = $scope.trash.length;
});
});
在控制器 1 中,垃圾发布功能是我尝试从控制器 2 更新总垃圾箱的地方
我知道这是我错过的小东西。
更新
具有控制器和变量的 HTML:
<div class="container">
<div class="row" align="center">
<div class="stats" ng-controller="postsTrashCtrl"><i class="fa fa-thumb-tack"></i> Total Posts (<span class="attendStat">{{ totalItems }}</span>)<span class="seperator"> | </span><i class="fa fa-trash-o"></i> <a href="#/trash" id="trashCan" class="trashCan">Trash</a> (<span class="attendStat">{{totalTrashItems}}</span>)</div>
</div>
我看到你那里有一个空的服务。
无需深入研究您当前的代码。对于此上下文,我的控制器间通信解决方案是在发布,垃圾箱和取消垃圾箱事件上$broadcast("customEventName")。
您的PostController和TrashPostController将使用$on("customEventName", function(){ })订阅这些广播事件
所有数据的发布和丢弃,甚至与服务器的通信都将使用一个PostTrackingService进行维护。在这种情况下,如果您的控制器需要执行任何发布和跟踪操作,则只需调用该服务。
我知道这有点长。我建议首先查看html,然后了解这些控制器的工作原理,最后查看如何定义服务。如果将此模式应用于代码。您的问题将得到解决。
这是代码。你也可以在JSFiddle上玩它
<script src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="PostController">
{{postCount}}
<button ng-click="post()">
Post
</button>
<button ng-click="trash()">
Trash
</button>
</div>
<div ng-controller="TrashController">
{{trashCount}}
<button ng-click="untrash()">
UnTrash
</button>
</div>
</div>
<script>
var app = angular.module('myApp', []);
//----------------- Service to track all post changes ---------------
app.factory('PostTrackingService', function($rootScope) {
var postCount = 10;
var trashCount = 3;
var _postTrackingService = {};
_postTrackingService.getPostCount = function(){ return postCount};
_postTrackingService.post = function(dataToPost){
//do something with dataToPost
postCount++;
//broadcast a post event
$rootScope.$broadcast("A custom POST event invented by me");
};
_postTrackingService.getTrashCount = function(){ return trashCount};
_postTrackingService.trash = function(postId){
//do something with postId
trashCount++;
postCount--;
//broadcast a trash event
$rootScope.$broadcast("A custom TRASH event invented by me");
};
_postTrackingService.untrash = function(postId){
//do something with postId
trashCount--;
postCount++;
//broadcast a trash event
$rootScope.$broadcast("A custom UNTRASH event invented by me");
};
return _postTrackingService;
});
//----------------- Post Controller ---------------
app.controller("PostController", ["PostTrackingService", "$scope", "$rootScope", function(PostTrackingService, $scope, $rootScope){
$scope.postCount = PostTrackingService.getPostCount();
$rootScope.$on("A custom POST event invented by me", function(){
$scope.postCount = PostTrackingService.getPostCount();
});
$rootScope.$on("A custom TRASH event invented by me", function(){
$scope.postCount = PostTrackingService.getPostCount();
});
$rootScope.$on("A custom UNTRASH event invented by me", function(){
$scope.postCount = PostTrackingService.getPostCount();
});
$scope.post = function(){
PostTrackingService.post("some data to post to server");
}
$scope.trash = function(){
PostTrackingService.trash("a post ID");
}
}]);
//----------------- Trash Controller ---------------
app.controller("TrashController", ["PostTrackingService", "$scope", "$rootScope", function(PostTrackingService, $scope, $rootScope){
$scope.trashCount = PostTrackingService.getTrashCount();
$rootScope.$on("A custom TRASH event invented by me", function(){
$scope.trashCount = PostTrackingService.getTrashCount();
});
$rootScope.$on("A custom UNTRASH event invented by me", function(){
$scope.trashCount = PostTrackingService.getTrashCount();
});
$scope.untrash = function(){
PostTrackingService.untrash("some post id");
//make any calls to inform server
}
}]);
</script>
相关文章:
- JavaScriptV5中的绑定和JQuery之间有任何关系吗
- 直接绑定和使用每个函数之间的区别
- 工厂和控制器之间的“绑定”
- 隔离作用域+绑定名称和仅在AngularJS中的隔离作用域之间的差异
- 绑定返回的结果和使用function()的结果之间有什么区别
- 父关系指令和子关系指令之间的绑定
- 控制器和外部指令之间的双向数据绑定
- AngularJS:图片上传+文件阅读器预览.控制器、指令和作用域之间的绑定出现问题
- 在 Angular 中的控制器之间绑定数据
- ExtJS:网格和表单之间的双向绑定
- AngularJS Modal 中控制器之间的双向绑定
- 两个网络组件之间的绑定:谷歌地图+地理定位
- jQuery和纯Javascript中的指针事件绑定之间的区别
- 尝试实现 ng-repeate 和表单之间的双向绑定
- 为什么角度绑定在传入时会中断指令之间的绑定
- 发布绑定/监视两个控制器之间共享的服务变量
- 在angularjs中如何在两个不同的ng模型之间绑定数据
- 任何在函数之间绑定反应变量的方法
- 在使用javascript创建子元素的父元素和子元素之间绑定一个值
- 如何在元素之间绑定css属性