如何在其他控制器AngularJS中观察变量答案

【问题标题】：How to watch variables in other controllers AngularJS如何在其他控制器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 列表移动到服务中，并将服务注入到组件和控制器中。这是可行的，因为服务是单例的。
由于两个控制器位于不同的模块中，您需要使用共享服务stackoverflow.com/a/16725874/5950377
@GavishiddappaGadagi 它们不在不同的模块中。

标签： javascript angularjs binding components angularjs-components

【解决方案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 数组的方法。

【讨论】：