Question

我正在使用Angular JS 1.5.6组件动态构建表单。层次结构如下：index.html调用组件my-view，它调用组件my-form，它调用输入和按钮等单一组件。

问题是数据绑定不起作用，因为输入组件中的任何修改都没有考虑到my-view组件中。

除了我有一个奇怪的行为，每次我更新输入值时，都会调用查看组件功能。

我有plunkered这个，提交按钮会触发console.log（所以需要打开firebug来查看它的运行情况。）

这是我的index.html

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

这是myView.html

<div class="container">
  <h2>With component myform</h2>
  <my-form form-elements="
    [{type:'input', label:'First name', placeholder:'Enter first name',model:$ctrl.userData.firstName, id:'firstName'},
    {type:'input', label:'Last name', placeholder:'Enter last name',model:$ctrl.userData.lastName, id:'lastName'},
    {type:'button', label:'Submit', click:$ctrl.click()}]"></my-form>
</div>

<div class="container">
  <h2>Check data binding</h2>
  <label>{{$ctrl.userData.firstName}}</label>
  <label>{{$ctrl.userData.lastName}}</label>
</div>

这是myView.js

(function() {
  'use strict';

  angular.module('MyApp').component('myView', {
    templateUrl: 'myView.html',
    controller: MyViewController,
    bindings: {
      viewFormElements: '<'
    }
  });

  function MyViewController() {
    this.userData = {
      firstName: 'François',
      lastName: 'Xavier'
    };

    function click() {
      console.log("Hello " + this.userData.firstName + " " + this.userData.lastName);
    }

    this.click = click;
  }

})();

Answer 1

我设法用2路绑定解决我的问题，并将form-element放在一个对象中，而不是直接将它放在视图中（$ ctrl.formElements）。它位于plunker。

myView.html

<div class="container">
    <h2>With component myform</h2>
    <my-form form-elements=$ctrl.formElements></my-form>
  </div>
  <div class="container">
    <h2>Check data binding</h2>
    <label>{{$ctrl.formElements}}</label><br />
 </div>'

组件中的Angular JS数据绑定不起作用

1 个答案: