How to pass data with Angularjs

Question

How do i pass data from the controller to a component to show to the user?

app.js

(function(angular) {
    'use strict';
  angular.module('app', []).controller('MainCtrl', function MainCtrl($scope, $http) {

    $http({
      method: 'GET',
      url: '/team',
    }).then(function successCallback(response) {
      console.log(response.data);
      this.teams = response.data;
      $scope.teams = response.data;
      // var keys = Object.keys($scope.agendaEventData);
      // $scope.eventslength = keys.length;
      
    }, function errorCallback(response) {
    });
      
  }).config(['$httpProvider', function($httpProvider) {
      $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
    }]);
  })(window.angular);

component

(function(angular) {
  'use strict';
angular.module('app').component('bringTeamToEvent', {
  templateUrl: '/assets/ng/app/team/bringTeamToEvent.html',
  bindings: {
    teams: '<'
  },
  
});
})(window.angular);

Template

{{$ctrl.teams}}
{{teams}}

The data is coming from the api no problems, i do not understand the complexity to get it to work. Learning from https://docs.angularjs.org/tutorial/step_13 and https://docs.angularjs.org/guide/component#!

Dan · Accepted Answer · 2020-12-26 20:15:51Z

1

Setting the data on this.teams is correct, and correct to access it like $ctrl.teams. The issue here is that your $http callback functions are injecting their own function context so that this doesn't refer to the component.

For this reason, it's generally good practice to use arrow functions for callback functions:

$http({
  method: 'GET',
  url: '/team',
}).then(response => {
  this.teams = response.data;
}, response => {
});

Here is a demo

answered Dec 26, 2020 at 20:15

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass data with Angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related