AngularJS $emit.$on 查询答案

【问题标题】：AngularJS $emit.$on queryAngularJS $emit.$on 查询
【发布时间】：2017-07-07 10:29:08
【问题描述】：

Plunker 在这里：- http://plnkr.co/edit/JaEi7ftnokYhdvBn4fRh?p=preview 我已经发出了数据，并且它在 data.name 下的 $on() 中可用。

但是，我无法使用 {{dumbevent1_name }} 在 UI 中显示 $scope.dumbevent1_name 我做错了什么？

代码：-

// 代码在这里

angular.module('myapp', [])
.controller('mycontroller', mycontroller)
.component('semantic3', { // semantic3
    restrict: 'E',
    transclude: true,
    template: `<h6> imsemantic3</h6> <div ng-transclude></div>
              `,
    controller: semantic3Controller,          
  })
.component('semantic2', { // semantic2
    scope: {},
    restrict: 'E',
    transclude: true,
    template: `<h6> imsemantic2</h6> <div ng-transclude></div>
              `,
  })
.component('semantic1', { // semantic1
    scope: {},
    restrict: 'E',
    transclude: true,
    template: `<h6> imsemantic1</h6> <div ng-transclude></div>
              `,
  })
.component('dumbCompDisplayNames', {
    scope:true,
    restrict: 'E',
    template: `<h6>h6dumb1</h6> {{$ctrl.names}}`,
    bindings:{
      names : '<' //one-way data binding
    },
    controller: dumbController,
});


function semantic3Controller($scope, $element, $attrs){
  var self = $scope;
  $scope.$on('dumbevent1', function(event, data){
    console.log(data.name); //works. received.
    self.dname = data.name;
    $scope.dumbevent1_name = data.name; //works
    // console.log($scope.dumbevent1_name); //works
    // capturename( data); //works
  }); 
    // console.log($scope.dumbevent1_name); //doesnt work.
  // function capturename(x){
  //   $scope.dumbevent1_name = x.name; 
  //   console.log($scope.dumbevent1_name); //works  
  // }

}


function dumbController($scope, $element, $attrs){
  // console.log($scope); //works. these r NOT positional injection
  // console.log($element);
  // console.log($attrs);

  $scope.$emit('dumbevent1', {name: 'namedumb1'});
}

// main controller
function mycontroller(){
  console.log('i am mycontroller');
}

【问题讨论】：

该示例与您选择的命名非常混淆：somecrap, imsemantic3, imsemantic2, imsemantic1, h6dumb1
dumbCompDisplayNames 是一个发出事件的哑组件，我在 $on() 内的智能组件（命名为语义3）中捕获了该事件。但是，我无法在 ui 上显示 data.name。
至少发表评论，为什么你投反对票？怎么了？？
我没有投反对票，但需要注意的一点是，该示例应该是如何重现该问题的MINIMAL 示例。此外，代码/plunkr 显示了一个设计非常糟糕的 AngularJS 应用程序。这只是两个想法。
同意@WilliamHampshire 很难理解。试图显示值的视图代码在哪里？看起来您正试图在语义 3 组件中显示它？

标签： angularjs emit

【解决方案1】：

在反复评论上浪费的时间是值得的吗？？如果没有时间看 plunker，请不要浪费时间发表评论。就像我说的那样，我解决了这个问题。

【讨论】：