如何在其他控制器AngularJS中观察变量
Posted
技术标签:
【中文标题】如何在其他控制器AngularJS中观察变量【英文标题】:How to watch variables in other controllers AngularJS 【发布时间】:2017-12-03 14:19:09 【问题描述】:我有一个名为 histogram demo 的组件,其中有一个单独的控制器,它有一个名为 $scope.selectedElements
的变量,我想在主 appCtrl
控制器中观察这个变量。如果没有$rootScope
,我怎么能访问这个变量。
主 html
<html lang="en-US" ng-app="histogram-test" ng-controller="appCtrl">
<div class="histogram-container"> <histogram-demo options = "options" data="data"></histogram-demo></div>
</html>
App.JS
angular
.module('histogram-test')
.config(function ($httpProvider, usSpinnerConfigProvider)
$httpProvider.defaults.withCredentials = true;
usSpinnerConfigProvider.setDefaults(
// see http://spin.js.org/
color: 'white',
radius: 30,
width: 8,
length: 16,
shadow: true,
);
)
.controller('appCtrl', function ($scope, appConfig, $rootScope, auth, $state)
/** HERE is where I want to watch $scope.selectedElements in Component.js **/
组件.JS
angular
.module('histogram-test').component('histogramDemo',
bindings:
data: "=",
options: "=",
,
templateUrl: templateUrl,
controller: controller,
controllerAs: 'vm',
);
function controller($state, $scope) ...
$scope.selectedElements = []; ...
【问题讨论】:
您可以使用事件发射器,这是更好的选择。 如何使用事件发射器将我的对象数组发送到 app.js? 将 selectedElements 列表移动到服务中,并将服务注入到组件和控制器中。这是可行的,因为服务是单例的。 由于两个控制器位于不同的模块中,您需要使用共享服务***.com/a/16725874/5950377 @GavishiddappaGadagi 它们不在不同的模块中。 【参考方案1】:您可以简单地考虑将一个方法传递给component
,并在您更改selectedElements
时从组件中调用该方法。此外,通过使您的绑定使用<
(单向绑定),让您的应用程序更高效地遵循单向数据流。
bindings:
data: "<",
options: "<",
selectedItemChange: '&'
,
然后你的指令元素看起来像
<histogram-demo
options="options"
data="data"
selected-item-changed="itemChanged(items)">
</histogram-demo>
并且每当您更改控制器组件内的vm.selectedItems
变量时,请调用vm.selectedItemChange(items: vm.selectedItems)
,因此histogram-demo
组件的使用者将拥有接收selectedItems
数组的方法。
【讨论】:
以上是关于如何在其他控制器AngularJS中观察变量的主要内容,如果未能解决你的问题,请参考以下文章
如何使用AngularJS在浏览器控制台中访问$ scope变量?
如何删除 angularjs 中的 $rootScope 变量? [复制]