Angular 1.5.8 Eingabe benutzerdefinierte Richtlinie ng-Modell

Question

Ich habe zu kämpfen und überall um, und ich kann mir nicht vorstellen googeln, warum diese Richtlinie mein Controller $ scope Wert nicht aktualisiert: Richtlinie:

app.directive('ingFormField', function() { 
    return { 
     restrict: "E", 
     scope: { 
      value: "=", 
      fieldName: "@", 
      fieldLabel: "@" 
     }, 
     div class="form-group">'+ 
      ' <label for="{{fieldName}}" class="control-label">{{fieldLabel}}:</label>'+ 
      ' <input ng-model="value" class="form-control" type="text" name="{{fieldName}}" id="{{fieldName}}" />' + 
     '</div>' 
    }; 
}); 

in HTML verwendet:

<ing-form-field field-name="Order" field-label="Order" ng-model="lateral.Order"></ing-form-field> 

Und mein Ziel "seitlich" von meinem Controller:

$scope.lateral = {Order: "01", Name: "Person"} 

Ich habe versucht, einige Funktionen von StackOverflow Antworten über eine Link-Funktion, um Werte in meinem Controller $ Scope mit der gleichen Ausgabe zu aktualisieren: Werte von $ Scope zu der Richtlinie funktionieren, aber jede Änderung auf dem Eingabefeld der Richtlinie nicht $ aktualisieren Scope-Objekt "lateral"

Answer 1

Dies kann hat eine alternative aproach sein durch ngModel Parameter direkt über und durch die Vorlage übergeben. Die Verwendung von ngModel hilft Ihnen dabei, die Namen in Ihrer Vorlage zu benennen.

Wenn Sie beispielsweise Ihre Direktivenvorlage mit der Direktive ngModel verwenden, können Sie sie aus dem Anweisungsbereich aufrufen und sie verwenden, um das Modell an Ihren übergeordneten Controller zu übergeben.

Der folgende Code implementieren diese Lösung, beachten Sie, dass dies eine der Lösung ist, finden Sie verschiedene Möglichkeiten, dies zu tun.

angular 
 
    .module('myApp', []) 
 
    .directive('ingFormField', function() { 
 
    return { 
 
     restrict: "E", 
 
     scope: { 
 
     ngModel: "=", 
 
     fieldName: "@", 
 
     fieldLabel: "@" 
 
     }, 
 
     template: '<div class="form-group">' + 
 
     ' <label for="{{fieldName}}" class="control-label">{{fieldLabel}}:</label>' + 
 
     ' <input ng-model="ngModel" class="form-control" type="text" name="{{fieldName}}" id="{{fieldName}}" />' + 
 
     '</div>' 
 
    }; 
 
    }) 
 
    .controller('myController', function($scope) { 
 
    $scope.lateral = { 
 
     Order: "01", 
 
     Name: "Person" 
 
    } 
 
    }); 
 

 
angular.element(document).ready(function() { 
 
    angular.bootstrap(document, ['myApp']); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 

 
<div ng-controller="myController"> 
 
    <ing-form-field field-name="Order" field-label="Order" ng-model="lateral.Order"> 
 
    </ing-form-field> 
 

 
    <pre>{{ lateral | json }}</pre> 
 

 
</div>

Answer 2

Bitte siehe unten Code, du bist sehr nah dran. Ich denke, Sie haben vielleicht versucht, den Wert mit ngModel zu setzen/übergeben, anstatt der Bereichseigenschaft, die Sie dafür festgelegt haben, was Wert war. Das ist, wenn ich richtig verstehe. Bitte lassen Sie mich wissen, wenn das hilft, wenn nicht, kann ich immer updaten.

function exampleController($scope) { 
 
    $scope.lateral = { 
 
    Order: "01", 
 
    Name: "Person" 
 
    }; 
 
} 
 

 
function ingFormField() { 
 
    return { 
 
    restrict: "E", 
 
    scope: { 
 
     value: "=", 
 
     fieldName: "@", 
 
     fieldLabel: "@" 
 
    }, 
 
    template: '<div class="form-group"> ' + 
 
     ' <label for="{{fieldName}}" class="control-label">{{fieldLabel}}:</label>' + 
 
     ' <input ng-model="value" class="form-control" type="text" name="{{fieldName}}" id="{{fieldName}}" />' + 
 
     '</div>' 
 
    }; 
 
} 
 

 
angular 
 
    .module('example', []) 
 
    .controller('exampleController', exampleController) 
 
    .directive('ingFormField', ingFormField);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 
<div class="container-fluid" ng-app="example"> 
 
    <div class="container" ng-controller="exampleController"> 
 
    <ing-form-field field-name="Order" field-label="Order" value="lateral.Order"></ing-form-field> 
 

 
    </div> 
 
</div>