0

我有两个 div - 第一个包含第二个。包含的 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中获取的，我想在单击图标按钮时重置已经输入的标签（这会更改包含 ng-tags-input 的 div 的可见性）。

问题是，因为我有TagsController其中包含数据（tags）并且此数据在 中不可见BarController，所以我不确定如何将tags数组重置为空。

我想过使用一项服务，但它填补了太多的耦合。我希望有一个TagsController在点击时调用的函数。但我不知道如何从另一个控制器中做到这一点

4

2 回答 2

2

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

您可以在 BarController 中包含 scope.broadcast("Event")

然后是 TagsController 上的“on”侦听器，当“Event”发生时，它将重置 tags 数组。

我会亲自到此。

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

于 2015-05-13T11:46:51.033 回答
1

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

参考$rootScope API 文档

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>

于 2015-05-13T11:56:47.957 回答