2017-02-13 46 views
0

這裏是我的HTML代碼,其中我打電話指令AngularJS自定義指令如何訪問對象值?

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

       </md-input-container> 

</div> 

以下是定製指令代碼

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

    } 
    };     

}); 

但是,當我試圖得到feat.DataType值我得到undefined而我調試代碼時獲取低於數值。

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

然後我改變代碼點點像這樣

link: function(scope, element, attr) 

,並試圖使用JSON解析器

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

下面代碼此更改後表示的InputBox

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

'鏈接:功能(範圍,元素,成就){'這是錯誤的,第三個參數是元素的屬性,所以它應該是:'link:function(scope,element,attrs){'然後'attrs.feat' – maurycy

+0

@maurycy我也試過並且它有值''{ 「Name」:「DisplayName」,「DataType」:「String」,「Description」:「Display N ame「,」Mandatory「:true,」Editable「:true,」Extension「:false,」MinLength「:3,」MaxLength「:100,」AllowedValues「:」「,」Value「:」「}」'和當試圖訪問attr.feat.AllowedValues時,它的未定義 –

+0

只需將'更改爲''和你應該很好 – maurycy

回答

1

{{feat.Value}} Angul arJS指令創建它自己的scope,您可以使用scope isolation

AngularJS docs for directive

訪問parent scope可以換來添加scope財產

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

如果屬性和範圍值都相同,則不需要使用的名稱只是'壯舉:「=」' – maurycy

+0

@maurycy那麼如何將其納入任何建議。 –

+0

我認爲你可以試試feat:'=''而不是'feat:'= feat'',字符串中帶有'='符號代表'directive'中的'屬性名' –