2013-03-24 18 views
11

ng model niteliğini özel bir öğede kullanmak istiyorum. Hep benim şablonunda ng modeli özniteliği ifade eklemek kısa sürede bir hata ile o,Yönerge şablonunda ifade ile ng-model kullanılarak açılama

ng-model="{{anyVariable}}" 

sorundur: Sorun bir ifade ile ng-modelinin ayarlanması gerektiğini, geçerli: kullanılan

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) 

kodu: Ben yönergesi şablonu içinde ng-model için bir ifade geçmesi için bir yol bulamadı

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

cevap

1

.

sonra çözelti, yönerge ve direktifi controller dinamik ana kontrolör modeli nesnesindeki adı oluşturur içinde izole edilmiş bir model oluşturur ve ana model güncellemeleri geçmesi için izole edilmiş bir model saatler:

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

Burada 'ng-repeat' kullanan başka bir sürüm ve yalnızca html'de gerekli olan özellik, ana denetleyiciden öğe için nesneden geçmek içindir http://plnkr.co/edit/kcxFA7lrnlMoScrHYlAC?p=preview – charlietfl

6

Bunun bir sürümünü deneyin:

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

Açısal 1.0.8 bir işlevi şablon olarak kabul etmiyoruz: 'Şablonun tam olarak bir kök öğesi olmalıdır. oldu: işlev render (element, attrs) {return '';} ' – maklemenz

+0

tam olarak neye ihtiyacım vardı. Teşekkürler @malix – Som