Enviar el formulario después de cambiar el valor Angular de la Directiva somete valor antiguo
-
21-12-2019 - |
Pregunta
Al pulsar el botón "enviar", fooController
en el controlador es igual a 'A', por lo barController
se le asigna el valor 'A', lo cual es confirmado en la interfaz de usuario:
bar in controller: A
Después de presionar "set value" botón, fooController
se actualiza desde la directiva a través de la unión con el valor 'B', lo cual es confirmado en la interfaz de usuario:
foo in controller: B
Sin embargo después de presionar el botón "enviar", fooController
en el controlador todavía tiene el valor de 'A' por lo $scope.barController
una vez más, se les asigna un valor de 'A':
bar in controller: A
¿Cómo puedo garantizar que en la segunda presentar fooController
tiene valor correcto de la 'B' y barController
se les asigna un valor de 'B' así?
HTML:
<div ng-app="app" ng-controller="Controller">
<script type="text/ng-template" id="directive-template.html">
foo in directive: {{fooDirective}}<br/>
<button ng-click="setValue()">set value</button>
</script>
<form data-ng-submit="getModel()">
<div ng-controller="Controller">
<button type="submit">submit</button><br/>
foo in controller: {{fooController}}<br/>
bar in controller: {{barController}}<br/>
<my-customer model="fooController"></my-customer>
</div>
</form>
</div>
Y el JS:
angular.module('app', [])
.controller('Controller', ['$scope', function($scope) {
$scope.fooController = 'A';
$scope.getModel = function() {
$scope.barController = $scope.fooController;
}
}])
.directive('myCustomer', function() {
return {
restrict: 'E',
scope: {
fooDirective: '=model'
},
controller: function ($scope) {
$scope.setValue = function() {
$scope.fooDirective = 'B';
};
},
templateUrl: 'directive-template.html'
};
});
Solución
No utilizar tipos de datos simples (números, cadenas, booleanos) porque la herencia no funciona en ambos sentidos, sólo funciona de padres $scope para niño $scope.Si quieres que funcione en ambos sentidos los objetos de usuario o matrices (que es lo que el angular de la comunidad realmente se recomienda).
$scope.barController = "aaaa";
debe ser:
$scope.modelState.barController = "aaa";
De esta manera si el cambio es a partir de que el niño alcance va a ser actualizado en el padre de uno así.
Otros consejos
deberá ajustar su cambio de directiva en el $scope.aplicar
$scope.apply(function(){
$scope.setValue = function() {
$scope.fooDirective = 'B';
};
}