Как скрыть компонент с помощью ng-if при нажатии кнопки в другом компоненте в angularjs?

Question

У меня есть два дочерних компонента, которые находятся в родительском компоненте.Я хочу скрыть component1, когда кнопка в component2 нажата.

Вот представление текущего кода, с которым я работаю:

Родительский компонент HTML:

<div ng-app='app'>
<component1></component1>
<component2></component2>
</div>

Component1.js

(function () {
'use strict';
angular.module('component1', [])
    .component('component1', {
        templateUrl: 'app/component1/component1.html',
        controller: [
            '$scope', '$timeout', '$element', '$location',
            function Component1Controller($scope, $timeout, $element, $location) {
                var my = this;

            }
        ]
    });
})();

Component1.html

<div ng-if="hideComponent" class="container-fluid">
<div class="animated fadeIn">
    <div class="row">
        <div class="col-md-12">
            Hide me!
        </div>
    </div>
</div>

Component2.js

(function () {
'use strict';
angular.module('component2', [])
    .component('component2', {
        templateUrl: 'app/component2/component2.html',
        controller: [
            '$scope', '$timeout', '$element', '$location',
            function Component2Controller($scope, $timeout, $element, $location) {
                var my = this;
                var hideComponent = false;
                hideComponent = $scope.hideComponent;
            }
        ]
    });
})();

Component2.html

<div class="container-fluid">
<div class="animated fadeIn">
    <div class="row">
        <div class="col-md-12">
            <button type="submit" ng-click="hideComponent(true)"></button>
        </div>
    </div>
</div>

Я знаюСуществуют способы передачи данных, но когда я в Google, я либо получаю информацию о Angular2, либо речь идет о передаче данных от дочернего элемента к компоненту, а не дочернего к дочернему элементу.Я также понимаю, что вы можете использовать Службы, но я хочу использовать один из методов привязки AngularJS, пока я не нашел четкого примера для этого варианта использования.

Answer 1

Я закончил тем, что нашел ответ, который искал, используя эту статью здесь:

http://dfsq.info/site/read/angular-components-communication

Основная проблема, с которой я столкнулся, была разработчиком, прежде чем я выбрал компонентныйархитектура для этого приложения AngularJS вместо стандартной архитектуры AngularJS.Это затрудняло поиск ответа, который я искал, сохраняя при этом неизменную архитектуру и методы в этом приложении (у меня крайний срок, и у меня нет времени на перефакторинг).Я знал, что не хочу использовать Broadcast / Emit (дальновидность) и не хочу использовать $ rootScope (плохая практика).Я закончил тем, что использовал привязку данных, как описано в этой статье, чтобы передать данные от дочернего компонента другому дочернему компоненту вместо дочернего к родительскому к дочернему.Спасибо за всех, кто внес свой вклад, и я надеюсь, что это поможет кому-то еще с тем же вопросом, потому что эта проблема была постоянной в моем приложении.

Answer 2

Простой способ без использования службы - использовать компонент-обертку, который просто содержит остальные, в контроллере этого компонента вы можете определить переменную, которая будет выполнять то, что вы хотите, и передать ее, используя двустороннюю привязку к дочерним элементам.

Потом дети могут изменить его по щелчку, и из-за двухстороннего изменения поведения привязки будут распространены на родительский узел и узлы-братья