Данные компонента считывания контроллера

Question

Моя идея - создать большую форму из разделенных компонентов. Так что это мой основной шаблон:

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

и его контроллер (шаблон переплетены от УИ маршрута конфигурации в контроллер)

(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