AngularJS .component()中的输出函数('&')不起作用

Output function ('&') in AngularJS .component() not working

本文关键字：不起作用 函数 component AngularJS 输出      更新时间：2023-09-26

我正在使用angular 1.5.6组件。我试图使用输出绑定('&')，但不可能让它工作。我已经解决了我的问题。

index.html代码:

<body ng-app="MyApp">
  <my-view></my-view>
</body>

我想使用输出绑定的组件的代码:

app.component('myInput', {
  template: [
    '<div class="form-group">',
    '<label>{{$ctrl.label}}</label>',
    '<input placeholder="{{$ctrl.placeholder}}" class="form-control" ng-model="$ctrl.fieldValue"/>',
    '</div>'
  ].join(''),
  controller: function() {},
  bindings: {
    label: '@',
    placeholder: '@',
    fieldValue: '=',
    onUpdate: '&'
  }
});

父组件的代码(输出绑定通过属性on-update完成):

app.component('myView', {
  template: [
    '<div class="container">',
    '    <h2>My form with component</h2>',
    '    <form role="form">',
    '      <my-input on-update="$ctrl.updateParam()" label="Firstname" placeholder="Enter first name" field-value=$ctrl.intermediaryData.firstName ></my-input>',
    '    </form>'
  ].join(''),
  controller: function() {
    var ctrl = this;
    ctrl.userData = {
      firstName: 'Xavier',
      lastName: 'Dupont',
      age: 25
    };
    ctrl.intermediaryData = {
      firstName: ctrl.userData.firstName,
      lastName: ctrl.userData.lastName,
      age: 25
    };
    function updateParam(){
      console.log("I have updated the component");
    }
  }
});

我的错，我忘了在输入组件中添加ng-change。我设法这样解决了这个问题:

app.component('myInput', {
  template: [
    '<div class="form-group">',
    '<label>{{$ctrl.label}}</label>',
    '<input ng-change="$ctrl.change()" placeholder="{{$ctrl.placeholder}}" class="form-control" ng-model="$ctrl.fieldValue"/>',
    '</div>'
  ].join(''),
  controller: function() {
    var ctrl = this;
    ctrl.change = function(){
      ctrl.onUpdate();
    }
  },
  bindings: {
    label: '@',
    placeholder: '@',
    parentParam: '@',
    fieldValue: '=',
    onUpdate: '&'
  }
});
相关文章：