从角度组件获取数据

Posted 2023-02-23

【中文标题】从角度组件获取数据

【英文标题】：Getting data from angular components

【发布时间】：2017-11-04 09:40:22

【问题描述】：

Angular 1.5

我创建的组件实际上只是由几个字段组成。每个字段都通过ng-model看model

在主页上，用户可以动态添加我的组件的多个示例。 有什么方法可以一键从页面上的所有组件模型中获取数据？

我尝试向该组件添加回调函数以返回组件模型数据。但只有当我在页面上有一个组件时它才有效。当用户添加更多内容时，不会返回父控制器。

感谢您的回复。

【参考方案1】：

您可以在button 中传递parameter 或在form 标记中使用ng-submit，然后在按钮功能控制器中传递param 参数。

这样

<form>
 <input type="text" ng-model="param.user">
 <button ng-click="click(param)">click</button>
</form> 

或者你可以通过 ng-submit 来完成

<form ng-submit="click(param)">
   <input type="text" ng-model="param.user">
   <button>click</button>
</form> 

在您的控制器中：--

$scope.click = function(param) 
  console.log(param) // will return the input value

至少我是这样理解你的问题的。尽管您应该提供迄今为止尝试过的代码，以便人们可以看到问题所在。

【参考方案2】：

这是其他论坛的答案 https://plnkr.co/edit/0PPwLq2SjKwVJWYpldgU?p=preview

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) 
  this.children = [];

  this.addChild = instance => 
    console.log(instance);
    this.children.push(instance);
  

  this.getChildValue = function() 
    console.log(this.children);
  

);


app.component('myComponent', 
  bindings: 
    addChild: '<'
  ,
  controller: function MyComponentCtrl() 

    this.name = '';
    this.surname = '';

    this.addChild(this);

  ,
  template: `
    <input type='text' ng-model='$ctrl.name' placeholder='Enter name' />
    <input type='text' ng-model='$ctrl.surname' placeholder='Enter surname' />
  `
);

留在这里，以防有人遇到同样的问题 对不起，如果我的描述不是很清楚