angularjs - snippet - title tag




Wie bindet man an ng-Modell innerhalb einer Direktive, die keinen Geltungsbereich hat? (2)

Sie können Attribute immer in Ihrer Winkelanweisung verwenden

Ich möchte eine Direktive erstellen, die ein Formularelement (Eingabe, Textbereich, Auswahl usw.) umschließt und an ng-model bindet.

Hier ist die Verwendung:

<div ng-controller="formController">
    <field 
           type="text" 
           ng-model="model.CellPhoneNumber" 
           label="Cell phone" 
           mini-help="Sample: 123412341234" 
           required="please give us your number" 
           numeric 
           cellPhone="cell phone number is invalid" />
    <div>{{ model.CellPhoneNumber }}</div>
</div>
<script>
    app.cp.register('formController', ['$scope', function ($scope) {

    }]);
</script>

Und hier ist meine Anweisung:

app.directive('field', function () {
        return {
            restrict: 'E',
            replace: 'true',
            scope: false,
            require: 'ngModel',
            template: '<div class="field">' +
                            '<label ng-if="label">{{ label }}</label>' +
                            '<input type="text" ng-if="type == \'text\'" required ng-model="ngModel" />' +
                            '<span class="mini help" ng-if="miniHelp">{{ miniHelp }}</span>' +
                            '<span class="messages">' +
                                '<span class="error message" ng-message="required" ng-if="requried">{{ required }}</span>' +
                            '</span>' +
                      '</div>',
            link: function (scope, element, attributes, ngModel) {
                scope.label = attributes.label;
                scope.miniHelp = attributes.miniHelp;
                scope.type = attributes.type;
                scope.required = attributes.required;
            }
        };
    });

Es funktioniert jedoch nicht. Ich bin beim Binden des ng-Modells fest. Ich weiß, dass ich durch den Geltungsbereich {} auf einen untergeordneten Bereich umschalten kann, und die Dinge würden funktionieren. Aber ich brauche Spielraum: falsch.

Hier ist eine gute Probe, wie es geht. Aber ich kann keine Probe mit dem Umfang finden: falsch.

Dynamische ng-Modellbindung innerhalb einer Direktive


Sie sind Ihrer gewünschten Lösung sehr nahe. Der vierte Parameter der link Funktion ist ein ngModelController, der sich von ngModel unterscheidet . Ihr Problem besteht darin, dass Sie es als Plan ngModel . Alles, was Sie tun müssen, sind nur ein paar kleine Änderungen.

Zuallererst müssen Sie den ngModelController an Ihren scope binden. Dann binden Sie anstelle von ng-model="ngModel" den $viewValue wie $viewValue : ng-model="ngModel.$viewValue" . Schließlich müssen Sie eine ngModel erstellen, damit Ihr Richtungsfeld den Wert von ngModel ändern kann, andernfalls wird es eine Richtung sein.

Hier ist der Arbeitscode:

angular
  .module('myApp', [])
  .directive('field', function() {
    return {
      restrict: 'E',
      replace: 'true',
      scope: false,
      require: 'ngModel',
      template: '<div class="field">' +
        '<label ng-if="label">{{ label }}</label>' +
        '<input type="text" ng-if="type == \'text\'" required ng-model="ngModel.$viewValue" />' +
        '<span class="mini help" ng-if="miniHelp">{{ miniHelp }}</span>' +
        '<span class="messages">' +
        '<span class="error message" ng-message="required" ng-if="requried">{{ required }}</span>' +
        '</span>' +
        '</div>',
      link: function(scope, element, attributes, ngModel) {
        scope.label = attributes.label;
        scope.miniHelp = attributes.miniHelp;
        scope.type = attributes.type;
        scope.required = attributes.required;

        scope.ngModel = ngModel;
        scope.$watch(function() {
          return ngModel.$viewValue;
        }, function(newValue) {
          ngModel.$setViewValue(newValue);
          ngModel.$render();
        });
      }
    };
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

<div ng-app="myApp" ng-init="myModel = 'qwe'">
  <field type="text" ng-model="myModel" label="Cell phone" mini-help="Sample: 123412341234" required="please give us your number" numeric cellPhone="cell phone number is invalid"></field>

  <input type="text" ng-model="myModel">
  <p>{{ myModel }}</p>
</div>





angularjs-scope