为不同的控制器点击重置数据

Question

我有两个 divs - 第一个包含第二个。包含的 div 有自己的控制器。当我单击容器中的图标按钮时，我更改了一个变量，该变量会影响包含的 div.

的可见性

看起来像这样：

<div ng-controller="BarController">
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="col-lg-2 page-title">My Page</div>
            <div class="col-lg-10">
                <span class="actions">
                    <i class="fa fa-lg fa-download fa-inverse" tooltip="Download"
                       ng-click="showSecondaryBar=!showSecondaryBar"></i>
                </span>
            </div>
        </div>
    </div>
    <div class="download navbar download-in download-out"
         ng-class="{'myhidden': !showSecondaryBar}"
         ng-cloak>
        <div class="col-lg-offset-4 col-lg-4 form-inline form-group" ng-controller="TagsController">
            <div class="download-label col-lg-6">
            <label>Download by tags:</label>
            </div>
            <div class="download-tags col-lg-6">
            <tags-input class="bootstrap" spellcheck="false" min-length="1" ng-model="tags" add-from-autocomplete-only="true">
                <auto-complete source="loadTags($query)" min-length="1" load-on-down-arrow="true"
                               load-on-focus="true" max-results-to-show="5"
                               highlight-matched-text="false"></auto-complete>
            </tags-input>
                </div>
        </div>
    </div>
</div>

<tags-input> 取自 ng-tags-input，我想在单击图标按钮时重置已经键入的标签（这会更改 [=28= 的可见性） ] 包含 ng-tags-input).

问题是，因为我有包含数据 (tags) 的 TagsController，而此数据在 BarController 中不可见，我不确定如何才能将 tags 数组重置为空。

我想过使用服务，但它太过耦合了。我希望在 TagsController 中有一个函数，它在单击时被调用。但我无法弄清楚如何从另一个控制器做到这一点

Answer 1

你是对的，你必须使用服务。为什么不使用广播，因为 TagController 包含在 BarController 中？

您可以在 BarController

中包含一个 scope.broadcast("Event")

然后是 TagController 上的 "on" 侦听器，它将在 "Event" 发生时重置标签数组。

我个人会同意的。

https://docs.angularjs.org/api/ng/type/$rootScope.Scope

Answer 2

您可以在 $rootScope 上使用 $broadcast 将事件发送到 TagsController。所以TagsController可以通过为它注册一个事件监听器来接收这个事件。请参阅以下示例。

参考$rootScope API docs

angular.module('app',[])
.controller('ParentController', function($rootScope) {
    var parentCtrl = this;
  parentCtrl.someFlag = true;
  
  parentCtrl.changeFlag = function() {
    parentCtrl.someFlag = !parentCtrl.somFlag;
    $rootScope.$broadcast('resettags', {'defaultTags': 'whatever_tag'});
  }
  })
.controller('ChildController', function($rootScope){
    var childCtrl = this;
    childCtrl.tags = "Some tags entered by user";
  $rootScope.$on('resettags', function(event, args) {
      
      childCtrl.tags = args.defaultTags;
    });
  });

.myHidden {
  display: none;
 }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">

  <div id="main" ng-controller="ParentController as parentCtrl">
      <button type="button" ng-click="parentCtrl.changeFlag()">Toggle</button>
      <div ng-class="{'myHidden' : !parentCtrl.someFlag}">
        <div ng-controller="ChildController as childCtrl">
              <h1>{{childCtrl.tags}}</h1>
          </div>
    </div>
  </div>
</div>

为不同的控制器点击重置数据

Reset data on click for a different controller

javascript

jquery

angularjs

ng-tags-input