【问题标题】:How can I emit data from main controller to view controller in angular?如何从主控制器发出数据以角度查看控制器?
【发布时间】:2016-03-21 07:56:54
【问题描述】:

我想用 Angular 创建一个应用程序。

我有视图之外的主控制器和视图的特定控制器。

如何将数据从主控制器发送到视图的控制器(主控制器)?

我想在主控制器发出数据后执行视图控制器中的功能。

我尝试使用 - $emit$on,但在我的情况下它不起作用。

我的代码例如: https://jsfiddle.net/32hb3odk/7/

Index.html

<div ng-app="myApp">

 <div class="head-part" ng-controller="MainController as main">
 <h1>Header</h1>
 <input ng-click="main.EmitData()" type="button" value="Emit data to child control" />
 <br /> <br />
 </div>

  <div class="view-part">
  <h2>View:
  </h2>
  <div ng-view></div>
</div>


<script type=text/ng-template id=home.html>   
<div>{{home.title}}</div>
</script>

</div>

Javascript:

angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {

        $routeProvider
            .when('/', {
                controller: 'HomeController',
                controllerAs: 'home',
              templateUrl: 'home.html'
            })
                        .otherwise('/');
    }]);

angular.module('myApp').controller('HomeController', ['$scope',function ($scope) {
        var vm = this;
        vm.title = 'Homepage';
    $scope.$on('EmitMain', function(){
        alert("GetDataFromMainController");
    });
    }]);

  angular.module('myApp').controller('MainController', ['$scope', function ($scope) {

        var vm = this;
        vm.EmitData = function(){
      $scope.$emit('EmitMain');
    }

    }]);

【问题讨论】:

  • 我没有太多的依据,但大多数时候,当人们询问有关将数据从一个控制器传输到另一个控制器的问题时,他们应该使用服务。所以,解释一下,为什么你认为你不应该使用服务?
  • @Pjetr 因为我需要一个不通过服务传递数据的行动指标。
  • 处理动作的服务将传递动作指示符而不是在单击按钮时传递动作指示符不是更有意义吗? &lt;div ng-if="dataService.isBusy"&gt;&lt;i class="loading"&gt;&lt;/i&gt;&lt;/div&gt;.

标签: javascript angularjs angular-broadcast


【解决方案1】:

那是因为$emit 爬上了树。当它向下遍历树时,请改用$broadcast

【讨论】:

  • 我在这个示例中尝试了 $broadcast,但它不起作用。
  • @Jenan $scope.$broadcast 而不是 $scope.$emit?
  • 嗯,ng-view div 是 mainController DIV 的子级吗?如果它们实际上是兄弟,则必须使用 $rootScope.$on 和 $scope.$emit。如果你这样做,我认为它破坏了 mainController 的逻辑。
  • 这里是更新后的小提琴:jsfiddle.net/32hb3odk/9 请正确缩进你的 HTML 并记住 $emit 和 $broadcast 总是从你触发它们的地方遍历 DOM 树。如果元素是同级的,则需要使用不同的方法,例如使用 $rootScope。
  • 好的,感谢您修复我的示例。现在效果很好! :)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-03-18
  • 1970-01-01
  • 2012-08-11
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多