如何使用 Angularjs 传递数据

Posted 2023-02-23

【中文标题】如何使用 Angularjs 传递数据

【英文标题】：How to pass data with Angularjs

【发布时间】：2021-04-03 22:21:13

【问题描述】：

如何将数据从控制器传递到组件以显示给用户？

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

组件

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

模板

$ctrl.teams
teams

数据来自 api 没有问题，我不明白让它工作的复杂性。 向https://docs.angularjs.org/tutorial/step_13学习 和https://docs.angularjs.org/guide/component#！

【参考方案1】：

在this.teams 上设置数据是正确的，并且像$ctrl.teams 一样访问它是正确的。这里的问题是您的 $http 回调函数正在注入它们自己的函数上下文，因此 this 不会引用该组件。

因此，将arrow functions 用于回调函数通常是一种很好的做法：

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

这是demo