Enviar el formulario después de cambiar el valor Angular de la Directiva somete valor antiguo

StackOverflow https://stackoverflow.com//questions/25015956

Pregunta

http://jsfiddle.net/p8RNJ/3/

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'
    };
});
¿Fue útil?

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';
        };
   }
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top