Как смотреть переменные в других контроллерах AngularJS

Question

Как смотреть переменные в других контроллерах AngularJS

У меня есть компонент под названием гистограмма демо, в котором есть отдельный контроллер, который имеет переменную с именем $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 **/}

Component.JS

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

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

1

javascript angularjs binding components angularjs-components

Источник

user6029203 29 июн '17 в 18:35

1 ответ

Решение

Другие вопросы по тегам javascript angularjs binding components angularjs-components

user2435473 29 июн '17 в 19:31 2017-06-29 19:31 · Accepted Answer · 2017-06-29 19:31

Вы можете просто рассмотреть возможность передачи метода 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 массив.