2013-03-24 20 views
11

Desidero utilizzare l'attributo ng-model in un elemento personalizzato. Il problema è, che ho bisogno di impostare il modello ng con un'espressione:Angolare utilizzando ng-model con espressione nel modello di direttiva

ng-model="{{anyVariable}}" 

Il problema è che ottengo sempre un errore non appena aggiungo l'espressione all'attributo ng-model nel mio modello:

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) 

il codice utilizzato:

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}}" />'); 

risposta

1

non riuscivo a trovare un modo per passare un'espressione per ng-model all'interno del modello direttiva.

seguente soluzione crea un modello isolato all'interno della direttiva e la direttiva controller crea dinamicamente il nome della proprietà in oggetto principale modello di controller e guarda il modello isolato per passare gli aggiornamenti del modello principale:

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

+0

Ecco un'altra versione che utilizza 'ng-repeat' e solo l'attributo richiesto in html è per il passaggio nell'oggetto per l'elemento dal controller principale http://plnkr.co/edit/kcxFA7lrnlMoScrHYlAC?p=preview – charlietfl

6

provare una versione di questo:

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

Angular 1.0.8 fa non accetta una funzione come modello: 'Il modello deve avere esattamente un elemento radice. was: function render (elemento, attrs) {return '';} ' – maklemenz

+0

esattamente quello di cui avevo bisogno. Grazie @malix – Som

Problemi correlati