There seems to be an issue with changing the 'mensaje' variable in both the "padre controller" and the "hijo controller" and visualizing the changes. When clicking on "cambiar padre," the value changes as expected. However, if I then click on "cambiar desde el hijo," it works but subsequent clicks on "cambiar desde el padre" do not function properly.
Here is the JavaScript code:
angular.module('starter.controllers', [])
.controller('padre', function ($scope) {
$scope.mensaje = "hola";
$scope.cambiarPadre = function () {
$scope.mensaje = "texto modificado desde el padre";
};
})
.controller("hijo", function ($scope) {
$scope.cambiarHijo = function () {
console.log('entro a cambiar hijo : ');
$scope.mensaje = "texto modificado desde el hijo";
};
$scope.cambiarPadreDesdeHijo = function () {
console.log('entro a cambiar hijo : ');
$scope.$parent.mensaje = "texto modificado desde el hijo";
};
})
And here is the HTML code:
<ion-view view-title="Dashboard" ng-controller="padre as p">
<ion-content class="padding">
FROM PADRE
<br>
padre:{{mensaje}}
<br>
hijo:{{mensaje}}
<br>
<br>
<button ng-click="cambiarPadre()">cambiar desde el padre</button>
<div ng-controller="hijo as h">
FROM HIJO without anything
<br>
without parent:
<br>
padre:{{mensaje}}
<br>
hijo:{{mensaje}}
<br>
<br>
with parent:
<br>
padre:{{$parent.mensaje}}
<br>
hijo:{{$parent.mensaje}}
<br>
<button ng-click="cambiarHijo()">cambiar desde el hijo</button>
<br>
<br>
<button ng-click="cambiarPadreDesdeHijo()">cambiar padre desde hijo</button>
</div>
</ion-content>
</ion-view>