-2

Plunker is here:- http://plnkr.co/edit/JaEi7ftnokYhdvBn4fRh?p=preview I have emitted data and its available in $on() under data.name.

However, I am not able to display $scope.dumbevent1_name in UI using {{ dumbevent1_name }} What am I doing wrong ?

Code:-

// Code goes here

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');
}
Plankton
  • 388
  • 3
  • 13
  • The example is pretty confusing with the naming you chose: somecrap, imsemantic3, imsemantic2, imsemantic1, h6dumb1 – Kyle Krzeski Jul 07 '17 at 11:43
  • dumbCompDisplayNames is a dumb component which emitted an event and I have captured that in smart component (named semantic3) inside $on() . However, I am unable to display data.name on the ui. – Plankton Jul 07 '17 at 11:49
  • atleast put a comment why u r downvoting ?? what was wrong ?? – Plankton Jul 07 '17 at 11:57
  • I didn't downvote, but one thing to note is that the example should be a [MINIMAL](https://stackoverflow.com/help/mcve) example of how to reproduce the issue. Also, the code/plunkr shows a very poorly designed AngularJS app. Those are just two thoughts. – Kyle Krzeski Jul 07 '17 at 12:26
  • agree with @WilliamHampshire it's hard to follow. Where is the view code that is trying to display the value? It looks like you are trying to display it in the semantic3 component? – Ero Jul 07 '17 at 13:40
  • the plnkr link is mentioned in the first line. – Plankton Jul 08 '17 at 03:04
  • Anyways, i fixed it here . http://plnkr.co/edit/TVZHbko9ZV2ivCugryNB?p=preview (A different plunker) – Plankton Jul 08 '17 at 03:13
  • The plunkr doesn't make it any less confusing. Please trim it down to a [minimal, understandable example](https://stackoverflow.com/help/mcve). – Kyle Krzeski Jul 10 '17 at 13:13

1 Answers1

0

The time wasted on commenting repeatedly is worthwhile somehow?? If don't have time to look at the plunker don't waste time commenting. Like I said I fixed the issue.

Plankton
  • 388
  • 3
  • 13