I have a primary controller and another controller where I extend the primary one to display a different layout.
Primary controller:
function CustomerInformationController(...) {
var vm = this;
...
vm.save = function() {
if (angular.isDefined(vm.guestAccountForm)) {
...
}
...
Primary template:
<div ng-controller="CustomerInformationController as customerInformation" class="customer-information">
<form name="customerInformation.guestAccountForm">
...
</form>
</div>
Extended controller:
function CustomerInformationControllerExtent($controller, $scope) {
var vm = this;
// Extend Product Controller.
angular.extend(this, $controller('CustomerInformationController', { $scope: $scope }));
Extended template (I want to be able to redesign this template and override it):
<div ng-controller="CustomerInformationControllerExtent as customerInformation" class="customer-information">
<form name="customerInformation.guestAccountForm">
...
</form>
</div>
Everything works fine when using only the primary controller, but in the extended controller, when I try to check if the form is valid, vm.guestAccountForm is undefined.
However, when I try with this (this.guestAccountForm), it works.
Am I missing something with the extend function?