Wenn Sie das Formular nach der Änderung des Werts in der Angular-Richtlinie senden, wird der alte Wert übermittelt

Question

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

Wenn ich auf die Schaltfläche „Senden“ drücke, fooController im Controller ist also gleich 'A' barController erhält den zugewiesenen Wert „A“, der in der Benutzeroberfläche bestätigt wird:

bar in controller: A

Nachdem ich die Taste „Wert einstellen“ gedrückt habe, fooController wird von der Direktive durch die Bindung mit dem Wert „B“ aktualisiert, der in der Benutzeroberfläche bestätigt wird:

foo in controller: B

Nachdem ich jedoch auf die Schaltfläche „Senden“ geklickt habe, fooController im Controller hat also immer noch der alte Wert 'A' $scope.barController wird erneut der Wert „A“ zugewiesen:

bar in controller: A

Wie kann ich das bei der zweiten Einreichung sicherstellen? fooController hat den korrekten Wert von 'B' und barController wird auch der Wert „B“ zugewiesen?

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>

Und der 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

Verwenden Sie keine primitiven Datentypen (Zahlen, Zeichenfolgen, boolesche Werte), da die Vererbung nicht in beide Richtungen funktioniert, sondern nur vom übergeordneten $scope zum chid $scope.Wenn Sie möchten, dass es in beide Richtungen funktioniert, verwenden Sie Benutzerobjekte oder Arrays (das empfiehlt die Angular-Community tatsächlich).

$scope.barController = "aaaa";

sollte sein:

$scope.modelState.barController = "aaa";

Wenn Sie es also im untergeordneten Bereich ändern, wird es auch im übergeordneten Bereich aktualisiert.

Answer 2

Sie müssen Ihre Direktivenänderung in $scope.apply einschließen

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