up vote 0 down vote favorite

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" />
share|improve this question
    
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 Feb 13 at 11:10
    
@maurycy I tried that also and it have value "{"Name":"DisplayName","DataType":"String","Description":"Di‌​splay Name","Mandatory":true,"Editable":true,"Extension":false,"Mi‌​nLength":3,"MaxLengt‌​h":100,"AllowedValue‌​s":"","Value":""}" and when trying to access attr.feat.AllowedValues its coming undefined – Subodh Joshi Feb 13 at 11:13
    
just change <feat-directive feat="{{feat}}" /> to <feat-directive feat="feat" /> and you should be fine – maurycy Feb 13 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 Feb 13 at 11:24
    
@maurycy after changing accroding to your suggestion i am getting attr value like this $attr : Object feat : "feat" – Subodh Joshi Feb 13 at 11:25
up vote 1 down vote accepted

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'
 }
 ...
}
share|improve this answer
    
if the attribute and scope value are the same you don't need to use the name just feat: '=' – maurycy Feb 13 at 11:09
    
@maurycy Then how to include it any suggestion. – Subodh Joshi Feb 13 at 11:09
    
I think you can try feat: '=' instead feat: '=feat', in string with = sign represent name of the attribute in directive – Sanjay Nishad Feb 13 at 11:15
    
@SanjayNishad Do you mean sureApp.directive('featDirective', function () { return { restrict: 'E', scope: { feat: '=feat' }, template: – Subodh Joshi Feb 13 at 11:18
    
@SubodhJoshi yes – Sanjay Nishad Feb 13 at 11:20

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.