Angular 1.5 将数据从组件传递到控制器

Posted 2023-02-23

【中文标题】Angular 1.5 将数据从组件传递到控制器

【英文标题】：Angular 1.5 Pass data from component to controller

【发布时间】：2017-03-05 06:12:53

【问题描述】：

我在控制器内部有组件，我正在将数据绑定到它。如何使组件中的更改在控制器中可见。 我有那个代码：

JS

app.controller('TheCtrl', function($scope) 
 $scope.changeable = 'earlier';
);

app.component('innerComponent', 
 bindings: 
  changeable: '='
 ,
 controller: function() 
  this.changeable = 'later';
 

HTML

<div ng-controller="TheCtrl">
 <inner-component changeable="val"></inner-component>
 <p>
  changeable
 </p>
</div>

并且它不会更改控制器视图中的“可更改”值（它显示“早期”值）。为什么？如何使更改在控制器中可见？

【问题讨论】：

首先你得到 $scope.val 到内部组件...对于两种方式的绑定工作，它应该是复杂对象而不是像这样的原始字符串...

【参考方案1】：

它确实按预期工作。

function appCtrl() 
  this.value = "test";

var inner = 
 bindings: 
  changeable: '='
 ,
 controller: function() 
  this.changeable = 'later';
 
;

angular.module('app', []);
angular.module('app')
  .controller('appCtrl', appCtrl)
  .component('inner', inner);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="appCtrl as ctrl">
    <inner changeable="ctrl.value"></inner>
    <p>
      ctrl.value
    </p>
  </div>
</div>

但是，您不应该使用组件来构建 MVW 应用程序。 您要么一路创建带有子组件的组件根，要么使用“受控 div”。

但混合 MVC/组件应用程序的架构很糟糕。

【讨论】：

糟糕的架构是什么意思...使用嵌套组件有什么问题？

不是一个组件。嵌套组件很好。

也许 gyc 意味着嵌套组件（根本不使用控制器）更像 Angular 2 方式，最好将应用程序从 Angular 1.5 升级到 Angular 2。

我的意思是，将 MVC 模式（html 元素中的 ng-controller）与组件混合并不是构建应用程序的最佳选择。您应该使用其中之一，但不能同时使用两者。虽说是题外话。问题已回答:)