Controller reading component data

Question

My idea is to create a big form from separated components. So this is my main template:

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

and its controller (the template is binded from ui route config to the controller)

(function () {
    'use strict';

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

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

Now, the user component:

(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 = {};            
        }
    });
})();

and the user template:

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

Now I want to be able to read user data when the user do the submit. How can I do it?

Answer 1

When using components, depending on the type of component (smart or dumb), you have to emit an output to the parent controller to handle such thing. But in this case, you can use ngModel to handle a model and change it on the parent from within the component. For example:

Working snippet:

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

A possible solution would be $$childTail. So if I want to access to user:

$scope.$$childTail.model.user