コントローラ読み取りコンポーネントデータ

Question

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

<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> 

これで、ユーザーが送信したときにユーザーデータを読み取ることができるようになりました。どうしたらいいですか？

Answer 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>

Answer 2

可能な解決策は、$$childTailです。

$scope.$$childTail.model.user