AngularJS Custom directive How to access object value?

Question

Here is my html code where i am calling directive

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

                </md-input-container>

 </div>

and below is custom directive code

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

  }
  };                

});

But when i am trying to get the value of feat.DataType i am getting undefined while I am getting below values when debugging the code.

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

Then i change code little bit like this

  link: function(scope, element, attr)

and tried used JSON parser

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

After this change below code showing {{feat.Value}} in inputbox

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

link: function(scope, element, feat){ this is wrong, the 3rd argument is for attributes of the element so it should be: link: function(scope, element, attrs){ and then attrs.feat — maurycy
– maurycy, Commented Feb 13, 2017 at 11:10
@maurycy I tried that also and it have value "{"Name":"DisplayName","DataType":"String","Description":"Display Name","Mandatory":true,"Editable":true,"Extension":false,"MinLength":3,"MaxLength":100,"AllowedValues":"","Value":""}" and when trying to access attr.feat.AllowedValues its coming undefined — Subodh Joshi
– Subodh Joshi, Commented Feb 13, 2017 at 11:13
just change <feat-directive feat="{{feat}}" /> to <feat-directive feat="feat" /> and you should be fine — maurycy
– maurycy, Commented Feb 13, 2017 at 11:19
btw: as far as I remember self-closing directives weren't fully supported (i'm not sure about latest versions of angular) — maurycy
– maurycy, Commented Feb 13, 2017 at 11:24
@maurycy after changing accroding to your suggestion i am getting attr value like this $attr : Object feat : "feat" — Subodh Joshi
– Subodh Joshi, Commented Feb 13, 2017 at 11:25

Sanjay Nishad · Accepted Answer · 2017-02-13 11:11:14Z

1

AngularJS directive creates it's own scope, you can access parent scope using scope isolation

AngularJS docs for directive

you can add scope property in return

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

edited Feb 13, 2017 at 11:11

answered Feb 13, 2017 at 11:04

Sanjay Nishad

1,62515 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

maurycy Over a year ago

if the attribute and scope value are the same you don't need to use the name just feat: '='

Subodh Joshi Over a year ago

@maurycy Then how to include it any suggestion.

Sanjay Nishad Over a year ago

I think you can try feat: '=' instead feat: '=feat', in string with = sign represent name of the attribute in directive

Subodh Joshi Over a year ago

@SanjayNishad Do you mean

sureApp.directive('featDirective', function () {        return {             restrict: 'E',     scope: {     feat: '=feat'            },          template:

Sanjay Nishad Over a year ago

and remove {{}} to pass scope into directive, <feat-directive feat="feat" />

|

Collectives™ on Stack Overflow

AngularJS Custom directive How to access object value?

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related