2017-02-13 3 views
0

Hier ist mein HTML-Code, wo ich RichtlinieAngularJS Benutzerdefinierte Direktive Wie auf Objektwert zugreifen?

<div ng-repeat="feat in templateAttributes track by $index"> 
       <md-input-container flex="50"> 
        <feat-directive feat="{{feat}}" /> 

       </md-input-container> 

</div> 

nenne und unten ist Code benutzerdefinierte Richtlinie

sureApp.directive('featDirective', function() { 
alert("Hariom"); 
    return { 

    restrict: 'E', 
    template: '<span style="padding-right:20px"><label value="{{feat.Name}}">{{feat.Name}}</label></span>', 
    link: function(scope, element, feat){ 

     if(feat.DataType === 'Boolean'){ 
      element.append('<input type="text" id="{{feat.Name}}" value="{{feat.Value}}" ng-model="feat.Value" />'); 
     } 
     else if(feat.AllowedValues && feat.AllowedValues.length > 0){ 
      element.append('<select ng-model="feat.Value" ng-options="x for x in feat.AllowedValues.split(\',\')"></select>'); 
     } 

     else if(feat.DataType == 'Integer'){ 
      element.append('<input type="text" id="{{feat.Name}}" value="{{feat.Value}}" ng-model="feat.Value" />'); 
     } 
     else if(feat.DataType == 'String'){ 
      element.append('<input type="text" id="{{attr.feat.Name}}" value="{{attr.feat.Value}}" ng-model="attr.feat.Value" ng-minlength="attr.feat.MinLength" ng-maxlength="attr.feat.MaxLength" />'); 
     } 
     else if(feat.DataType == 'IpAddress'){ 
      element.append('<input type="text" id="{{feat.Name}}" value="{{feat.Value}}" ng-model="feat.Value" />'); 
     } 

    } 
    };     

}); 

Aber wenn ich den Wert von feat.DataType zu bekommen versuche ich bin immer undefined während ich bin Beim Debuggen des Codes werden die Werte unterschritten.

$attr 
: 
Object 
feat 
: 
"{"Name":"DisplayName","DataType":"String","Description":"Display Name","Mandatory":true,"Editable":true,"Extension":false,"MinLength":3,"MaxLength":100,"AllowedValues":"","Value":""}" 
__proto__ 
: 
Object 

Dann ändern i Code wenig wie dieser

link: function(scope, element, attr) 

und versuchte, gebrauchte JSON-Parser

var feat1 = JSON.parse(attr.feat); 

Nach diesem Code unten Änderung {{feat.Value}} in inputbox

<input type="text" id="{{feat.Name}}" value="{{feat.Value}}" ng-model="feat.Value" /> 
+0

'Link: function (Umfang, Element, Leistung) {' das ist falsch, das dritte Argument ist für Attribute des Elements, also sollte es sein: "link: function (scope, element, attrs) {' und dann 'attrs.feat' – maurycy

+0

@maurycy Ich habe das auch versucht und es hat den Wert' "{ "Name": "DisplayName", "DataType": "String", "Beschreibung": "Anzeige N ame "," Mandatory ": true," Editierbar ": true," Extension ": false," MinLength ": 3," MaxLength ": 100," AllowedValues ​​":" "," Value ":" "}" 'und wenn du versuchst auf attr.feat.AllowedValues ​​zuzugreifen, kommt es zu undefined –

+0

ändere einfach '' in '' und du sollte in Ordnung sein – maurycy

Antwort

1

zeigt Angul arJS Richtlinie schafft seine eigene scope, Sie parent scope mit scope isolation

AngularJS docs for directive

zugreifen können Sie scope Eigenschaft im Gegenzug hinzufügen

return { 
restrict: 'E', 
scope: { 
    feat: '=feat' 
} 
... 
} 
+0

wenn das Attribut und Umfang Wert sind die gleichen Sie den Namen nicht nur' Leistung verwenden müssen: ‚=‘ ' – maurycy

+0

@maurycy Dann, wie man sie schließen jede Vorschlag. –

+0

Ich denke, du kannst 'feat: '='' statt 'feat: '= feat'', in der Zeichenkette mit' = 'zeichen stellen' name des attributes' in 'Direktive' –

Verwandte Themen