Question

我正在使用angular 1.5.6组件。我正在尝试使用输出绑定（＆＃39;＆amp;＆＃39;）但不可能让它工作。我有plunkered我的问题。

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

Answer 1

我的不好，我忘了在输入组件中添加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: '&'
  }
});

AngularJS .component（）中的输出函数（＆＃39;＆amp;＆＃39;）无法正常工作

1 个答案: