La soumission du formulaire après avoir modifié la valeur dans la directive angulaire soumet l'ancienne valeur

Question

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

Lorsque j'appuie sur le bouton "Soumettre", fooController dans le contrôleur est égal à 'A' donc barController obtient la valeur attribuée « A », qui est confirmée dans l'interface utilisateur :

bar in controller: A

Après avoir appuyé sur le bouton "définir la valeur", fooController est mis à jour à partir de la directive via une liaison avec la valeur « B », qui est confirmée dans l'interface utilisateur :

foo in controller: B

Cependant, après avoir appuyé sur le bouton "Soumettre", fooController dans le contrôleur a toujours l'ancienne valeur de « A », donc $scope.barController se voit à nouveau attribuer la valeur « A » :

bar in controller: A

Comment puis-je m'assurer que lors de la deuxième soumission fooController a la valeur correcte de 'B' et barController se voit également attribuer la valeur « B » ?

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>

Et le 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'
    };
});

Answer 1

N'utilisez pas de types de données primitifs (nombre, chaînes, booléens) car l'héritage ne fonctionne pas dans les deux sens, il ne fonctionne que du parent $scope au chid $scope.Si vous souhaitez que cela fonctionne dans les deux sens, les objets utilisateur ou les tableaux (c'est ce que la communauté angulaire recommande réellement).

$scope.barController = "aaaa";

devrait être:

$scope.modelState.barController = "aaa";

De cette façon, si vous le modifiez depuis la portée enfant, il sera également mis à jour dans la portée parent.

Answer 2

vous devez envelopper votre changement de directive dans $scope.apply

  $scope.apply(function(){
        $scope.setValue = function() {
            $scope.fooDirective = 'B';
        };
   }