0

私の考えは、分離されたコンポーネントから大きなフォームを作成することです。これが私のメインテンプレートです：

<form novalidate>
    <div class="row">
        <user></user>
    </div>
    <button type="button" class="btn btn-default" ng-click="submit()"> Submit   </button>
</form>

およびそのコントローラー (テンプレートは ui ルート構成からコントローラーにバインドされます)

(function () {
    'use strict';

    angular.module('app')
        .controller('formCtrl', formCtrl);

    function formCtrl ($scope) {
        $scope.submit = function() {
            console.log("read data");
        }
    }      
})();

次に、ユーザー コンポーネント:

(function () {
    'use strict';

    var module = angular.module('app.user');

    module.component("user", {
        templateUrl: "app/user/user.html",
        controllerAs: "model",
        controller: function () {
            var model = this;
            model.user = {};            
        }
    });
})();

およびユーザー テンプレート:

<form novalidate>
    <form-group>
        <label for="inputUser"> Name <label>
        <input ng-model="model.user.name" id="inputUser" type="text" placeholder="User"/>
    </form-group>
    <form-group>
        <label for="inputUser"> Email <label>
        <input ng-model="model.user.email" id="inputUser" type="email" placeholder="Email"/>
    </form-group>
    <div>
        {{model.user | json}}
    </div>
</form>

ユーザーが送信したときにユーザーデータを読み取れるようにしたいと考えています。どうすればいいですか？

4

2 に答える 2

1

コンポーネントを使用する場合、コンポーネントのタイプ (スマートまたはダム) に応じて、そのようなことを処理するために親コントローラーに出力を送信する必要があります。ただし、この場合、 を使用ngModelしてモデルを処理し、コンポーネント内から親でモデルを変更できます。例えば：

作業スニペット:

angular.module('app', [])
  .controller('formCtrl', function($scope) {
    $scope.user = {};
    $scope.submit = function() {
      console.log($scope.user);
    }
  })
  .component("user", {
    bindings: {
      user: '=ngModel'
    },
    templateUrl: "app/user/user.html",
    controllerAs: "model",
    controller: function() {}
  });

angular.element(function() {
  angular.bootstrap(document, ['app']);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<form novalidate ng-controller="formCtrl">
  <div class="row">
    <user ng-model="user"></user>
  </div>
  <button type="button" class="btn btn-default" ng-click="submit()">Submit</button>
</form>

<script type="text/ng-template" id="app/user/user.html">
  <form novalidate>
    <div>
      <label for="inputUser">Name
        <label>
          <input ng-model="model.user.name" id="inputUser" type="text" placeholder="User" />
    </div>
    <div>
      <label for="inputUser">Email
        <label>
          <input ng-model="model.user.email" id="inputUser" type="email" placeholder="Email" />
    </div>
    <div>
      {{ model.user | json }}
    </div>
  </form>
</script>

于 2016-12-28T14:17:40.813 に答える
0

可能な解決策は次のとおり$$childTailです。したがって、ユーザーにアクセスしたい場合：

$scope.$$childTail.model.user
于 2016-12-28T14:01:01.170 に答える