Angular mit ng-Modell mit Ausdruck in Richtlinie Vorlage

Question

Ich möchte das ng-Modell-Attribut in einem benutzerdefinierten Element verwenden. Das Problem ist, dass ich das ng-Modell mit einem Ausdruck festlegen muß:

ng-model="{{anyVariable}}" 

Das Problem ist, dass ich immer eine Fehlermeldung erhalten, sobald ich den Ausdruck in das ng-Modell Attribut in meinem Template hinzu:

Error: Syntax Error: Token 'x.name' is unexpected, expecting [:] at column 3 of the expression [{{x.name}}] starting at [x.name}}]. 
    at Error (<anonymous>) 
    at throwError (http://localhost:9000/public/javascripts/angular.js:5999:11) 
    at consume (http://localhost:9000/public/javascripts/angular.js:6037:7) 
    at object (http://localhost:9000/public/javascripts/angular.js:6327:9) 
    at primary (http://localhost:9000/public/javascripts/angular.js:6211:17) 
    at unary (http://localhost:9000/public/javascripts/angular.js:6198:14) 
    at multiplicative (http://localhost:9000/public/javascripts/angular.js:6181:16) 
    at additive (http://localhost:9000/public/javascripts/angular.js:6172:16) 
    at relational (http://localhost:9000/public/javascripts/angular.js:6163:16) 
    at equality (http://localhost:9000/public/javascripts/angular.js:6154:16) 

der verwendete Code:

function addFormFieldDirective(elementName, template) { 
    app.directive(elementName, function() { 
     return { 
      restrict: "E", 
      scope: {}, 
      replace: true, 
           // adds some extra layout 
      template: buildFormTemplate(template), 
      link: function(scope, elm, attrs) { 
       scope.x = attrs; 
      } 
     }; 
    }); 
} 
addFormFieldDirective("textfield", '<input id="{{x.id}}" ng-model="{{x.name}}" type="text" name="{{x.name}}" value="{{x.value}}" />'); 

Answer 1

ich nicht einen Weg finden könnte, einen Ausdruck zu ng-model in der Richtlinie Vorlage zu übergeben.

Nach Lösung schafft ein isoliertes Modell in der Richtlinie und der Richtlinie controller erstellt dynamisch die Eigenschaftsnamen in Hauptsteuerung Modellobjekt und beobachtet das isolierte Modell-Updates zum Hauptmodell weitergeben müssen:

app.directive("textfield", function() { 
    return { 
     restrict: "E", 
     scope: {}, 
     replace: true, 
     controller:function($scope,$attrs) { 
      $scope.x=$attrs; 

      $scope.$watch('directiveModel',function(){ 
       $scope.$parent.myModel[$attrs.name]=$scope.directiveModel; 
      }) ; 

      $scope.directiveModel=$attrs.value; 
     }, 
     template: buildFormTemplate('<input ng-model="directiveModel" id="{{x.id}}" type="text" name="{{x.name}}" value="{{x.value}}" />'); 

    }; 
}); 

Plunkr Demo

Answer 2

Versuchen Sie eine Version von dieser:

.directive('myDir', function() { 
    return { 
     restrict: 'EA', 
     scope: { 
        YYY: '=ngModel' 
        }, 
     require: 'ngModel', 
     replace: true, 
     template: '<input ng-model="YYY" />' 
    }; 
});