AngularJS 自定义指令如何访问对象值？

Question

这是我的 html 代码，我在其中调用指令

 <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);

在输入框

中显示 {{feat.Value}} 下面的代码更改后

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

Answer 1

AngularJS 指令创建它自己的 scope，您可以使用 scope isolation

访问 parent scope

AngularJS docs for directive

可以在return

中添加scope属性

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

AngularJS 自定义指令如何访问对象值？

AngularJS Custom directive How to access object value?

javascript

directive

angularjs

angularjs-directive