如何使用controllerAs语法实时更新另一个angular控制器
How to update another angular controller in real-time using controllerAs syntax
我目前正在尝试使用一个控制器的服务从web API检索行计数值,然后在从DB检索值后更新不同的控制器变量-同时避免使用$scope或$rootScope。
下面是Controller1——当服务中的值发生变化时,这个控制器需要更新它的变量。目前它运行正常,但我想避免使用$scope或$rootScope:
(function() {
'use strict';
angular
.module('app.event')
.controller('Controller1', Controller1);
Controller1.$inject = ['service1', '$stateParams', '$rootScope'];
/**
* Controller 1
* @constructor
*/
function Controller1(service1, $stateParams, $rootScope) {
// Declare self and variables
var vm = this;
vm.number = 0;
init();
$rootScope.$on('countChanged', refresh);
/**
* Initializes the controller
*/
function init() {
service1.refreshCount($stateParams.id);
}
/**
* Refreshes the count
* @param {object} event - The event returned from the broadcast
* @param {int} count - The new count to update to
*/
function refresh(event, count) {
vm.number = count;
}
}
})();
服务-我想避免使用$rootScope。美元广播:
(function() {
'use strict';
angular
.module('app.event')
.factory('service1', service1);
service1.$inject = ['APP_URLS', '$http', '$rootScope'];
/**
* The service
* @constructor
*/
function service1(APP_URLS, $http, $rootScope) {
// Declare
var count = 0;
// Create the service object with functions in it
var service = {
getCount: getCount,
setCount: setCount,
refreshCount: refreshCount
};
return service;
///////////////
// Functions //
///////////////
/**
* Re-calls the web API and updates the count
* @param {Guid} id - The ID needed for the API call parameter
*/
function refreshCount(id) {
$http({ url: APP_URLS.api + '<TheAPINameHere>/' + id, method: 'GET' }).then(function (response) {
setCount(response.data.Count);
changed();
});
}
/**
* Returns the count value
*/
function getCount() {
return count;
}
/**
* Re-calls the web API and updates the count
* @param {int} newCount - The new count value
*/
function setCount(newCount) {
count = newCount;
changed();
}
/**
* Broadcasts a change event to be picked up on in Controller1
*/
function changed() {
$rootScope.$broadcast('countChanged', count);
}
}
})();
下面是Controller2中的一个函数,用于更新服务中的值-我希望能够在我这样做时立即获得Controller1中的值:
/**
* Removes a row from the database
* @param {object} field - The data row object that we're deleting from the table
*/
function remove(field) {
// Delete the row from the database
service2.delete(field.Id);
// Remove the row from the local data array and refresh the grid
vm.data.splice(vm.data.indexOf(field), 1);
// Set the count in the service to update elsewhere
service1.setCount(vm.data.length);
vm.indices.reload();
}
我避免使用$rootScope用于实践目的,但它似乎是最好的方法。当我试图根据其他建议使用公共属性时,它不适合我,所以我使用了$rootScope。
相关文章:
- 我的shareService在angular 2中发送值工作正常,但当我渲染我的另一个组件时,会获得默认值
- 如何在Angular单元测试中从另一个控制器的rootScope将方法添加到rootScope中
- 在Angular ui路由器中,如何将事件从一个视图发送到另一个视图
- 将鼠标悬停在Angular JS中的一个元素上,并将Class添加到另一个元素中
- 重定向到Angular JS中的另一个HTML页面
- JS/ANGULAR使用一个变量's值作为另一个对象的键
- 在一个控制器中更新服务变量,并在另一个控制器 - Angular JS中使用更新的值
- 如何使Angular打开一个按钮并关闭另一个按钮
- 另一个按钮内的按钮不会;不能在Firefox(Angular Material)中工作
- 从angular js中的另一个ng应用程序调用方法
- angular 2中另一个元素的“blur”之后不能“focus”
- Angular js如何将索引数据获取到另一个模板中
- 无法使用typescript访问angular中另一个控制器中声明的$rootscope属性
- 另一个错误:Angular Web应用程序中的[$resource:badcfg]
- 如何使用Angular 2服务提供包含指向另一个资源的链接/ids的资源集合
- 从另一个 Angular 控制器更新 ng-repeat
- 可能是也可能不是另一个Angular指令的子指令
- 如何使用controllerAs语法实时更新另一个angular控制器
- 我该如何从JSON中获取数据到另一个angular js控制器
- 将工厂注入另一个 Angular 工厂