Question

我在父组件中有两个子组件。单击component2中的按钮时，我想隐藏component1。

以下是我正在使用的当前代码的表示形式：

父组件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

一种不使用服务的简单方法是使用一个纯粹包含其他组件的包装器组件，在该组件的控制器中，您可以定义一个变量以执行所需的操作，并通过两种方式将其传递给子代。 / p>

然后，孩子可以在单击时对其进行更改，并且由于其两种绑定行为，更改行为将传播给父级和同级节点

Answer 2

我最终在这里使用本文找到了我想要的答案：

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

我遇到的主要问题是开发人员，然后才为该AngularJS应用程序选择基于组件的体系结构，而不是标准的AngularJS体系结构。这使得在保持相同的体系结构和方法在此应用程序中一致的同时，很难找到我正在寻找的答案（我的工作期限很紧，没有时间重构）。我知道我不想使用Broadcast / Emit（向前思考），也不想使用$ rootScope（不好的做法）。我最终按照本文所述使用了数据绑定，以便将数据从子组件传递到另一个子组件，而不是再次将子组件传递给父组件。感谢所有贡献者，我希望这对其他有相同问题的人有所帮助，因为该问题在我的应用程序中一直存在。

在angularjs中单击另一个组件中的按钮时，如何使用ng-if隐藏组件？

2 个答案: