AngularJS: Verknüpfen mehrerer Bereichsvariablen in externen Vorlage

Question

Ich versuche, einige benutzerdefinierte Direktiven für Eingaben mit Validierungen von ngMessages-Direktive erstellt zu erstellen. Trotzdem kann ich nicht mehrere Variablen aus $ scope verknüpfen, um den Formularnamen und den Namen der Eingabe dynamisch zu bestimmen. Hier ist mein Code so weit:

Die Richtlinie:

app.directive('textBox', ['$compile', function ($compile) { 
    return { 
     restrict: 'E', 
     scope: { 
      label: "@", 
      fieldName: "@", 
      bindTo: "=" 
     }, 
     require: "^form", 
     templateUrl: '/WebClient/Directives/TextBox/textBoxTemplate.html', 
     link: function (scope, element, attrs, ctrl) { 
      $scope.formName = ctrl.$name; 
     } 
    }; 
}]); 

Die Vorlage:

<div> 
    <label>{{label}}</label> 
    <input type="text" name="{{fieldName}}" ng-model="{{field}}" required /> 
    <div ng-messages="{{formName}}.{{fieldName}}.$error"> 
     <div ng-message="required">You left the field blank...</div> 
     <div ng-message="minlength">Your field is too short</div> 
     <div ng-message="maxlength">Your field is too long</div> 
     <div ng-message="email">Your field has an invalid email address</div> 
    </div> 
</div> 

Die Nutzung:

<text-box bind-to="myField" field-name="myField"></text-box> 

Die Fragen, die ich beziehen sich begegnen zu dem ng- Nachrichtenattributwert Scheint nicht zu funktionieren, wenn ich geschweifte Klammern verwende und den Text "formName.fieldName. $ Error" rendert, wenn ich das nicht mache. Das andere Problem hängt mit dem ng-Modell zusammen, es gilt das gleiche Szenario.

Vielen Dank!

Answer 1

Sie können die formController, ctrl in Ihrer Link-Methode an die Richtlinie wie scope.form = ctrl; übergeben.

Dann können Sie <div ng-messages="form[fieldName].$error"> hinzufügen, um auf die $error-Eigenschaft zuzugreifen.

Curly-Klammern werden nur für den Namen des Eingabefeldes benötigt. Für das ng-Modell können Sie das Modell direkt ohne Curlies hinzufügen, da das ng-Modell eine bidirektionale Bindung benötigt.

Bitte werfen Sie einen Blick auf die Demo unten oder diese jsfiddle.

angular.module('demoApp', ['ngMessages']) 
 
\t .controller('mainController', MainController) 
 
    .directive('textBox', ['$compile', function ($compile) { 
 
    return { 
 
     restrict: 'E', 
 
     scope: { 
 
      label: "@", 
 
      fieldName: "@", 
 
      bindTo: "=" 
 
     }, 
 
     require: "^form", 
 
     templateUrl: '/WebClient/Directives/TextBox/textBoxTemplate.html', 
 
     link: function (scope, element, attrs, ctrl) { 
 
      //$scope.formName = ctrl.$name; 
 
      scope.form = ctrl; 
 
     } 
 
    }; 
 
}]); 
 
    
 
function MainController($scope) { 
 
\t $scope.myField = 'test'; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-messages.js"></script> 
 

 
<div ng-app="demoApp" ng-controller="mainController"> 
 
    <form name="testForm"> 
 
     <text-box bind-to="model" field-name="myField"></text-box> 
 
    </form> 
 
    
 
    {{model}} 
 
    
 
    
 
    <script type="text/ng-template" id="/WebClient/Directives/TextBox/textBoxTemplate.html"> 
 
    <div> 
 
    <label>{{label}}</label> 
 
    <input type="text" name="{{fieldName}}" ng-model="bindTo" required /> 
 
    <div ng-messages="form[fieldName].$error"> 
 
     <div ng-message="required">You left the field blank...</div> 
 
     <div ng-message="minlength">Your field is too short</div> 
 
     <div ng-message="maxlength">Your field is too long</div> 
 
     <div ng-message="email">Your field has an invalid email address</div> 
 
    </div> 
 
</div> 
 
    </script> 
 
</div>