如何在其他控制器中觀察變量AngularJS

我有一個稱爲直方圖演示的組件，其中有一個單獨的控制器，其變量名爲$scope.selectedElements，我想在主控制器appCtrl中觀察此變量。如何在不使用$rootScope的情況下訪問此變量。如何在其他控制器中觀察變量AngularJS

主要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 **/}

Component.JS

angular 
.module('histogram-test').component('histogramDemo', { 
    bindings: { 
     data: "=", 
     options: "=", 
    }, 
    templateUrl: templateUrl, 
    controller: controller, 
    controllerAs: 'vm', 
}); 

function controller($state, $scope) { ... 
$scope.selectedElements = []; ...}

來源

2017-06-29 Anonymous Dodo

你可以使用事件發射器，這是更好的選擇。 –

如何使用事件發射器將對象數組發送到app.js？ –

將selectedElements列表移動到服務並在組件和控制器中注入服務。這是有效的，因爲服務是單身人士。 –

你可以簡單地考慮通過一種方法來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方法陣列。

來源

2017-06-29 19:31:27

如何在其他控制器中觀察變量AngularJS

回答

相關問題