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

时间:2016-10-23 10:34:01

标签: angularjs components

我在控制器内部有组件,我将数据绑定到它。如何在控制器中显示组件中的可见更改。 我有那个代码:

JS

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

HTML

export namespace Cars {
    export class CoolCar { /* ... */ }
    export class NiceCar { /* ... */ }
}

并且它不会更改控制器视图中的“可更改”值(它显示“早期”值)。为什么?如何在控制器中显示更改?

1 个答案:

答案 0 :(得分: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应用程序。 您可以一直使用子组件创建组件根目录,也可以使用“ controlled divs ”。

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