Question

我有两个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的div的visiliby）标签输入）。

问题是，因为我的TagsController包含数据（tags）并且这些数据在BarController中不可见，我不知道如何重置<{1}}数组变空。

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

Answer 1

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

您可以在BarController中包含scope.broadcast（“Event”）

然后在TagsController上有一个“on”监听器，当“事件”发生时，它将重置标签数组。

我会个人化。

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

Answer 2

您可以在$ rootScope上使用$broadcast向TagsController发送活动。因此TagsController可以通过为其注册事件侦听器来接收此事件。请参阅以下示例。

请参阅$rootScope API docs

＆＃13;

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;
    });
  });

＆＃13;

.myHidden {
  display: none;
 }

＆＃13;

<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>

＆＃13;

单击另一个控制器时重置数据

2 个答案: