How to access the attribute of angular directive in templateUrl html content

Question

How do I access the attribute of angular directive in templateUrl html content?

angular.module('myApp')
    .directive('questionImage', function () {
        return {
            restrict : 'E',
            scope : false,
            templateUrl : 'templates/questionImage.html',
            link : function(scope, element, attrs) {
                scope.type = attrs['type'];
            }
        }
    });

template HTML:

<div>
    <label>Image Links</label><br>
    <button type="button" ng-click="newImageLink('{{type}}')">+</button>
    <span ng-repeat="imageLink in questionFormData.imageUrls['{{type}}'] track by $index">
        <input type="text" ng-model="questionFormData.imageUrls['{{type}}'][$index]">
        <button type="button" ng-click="removeElement(questionFormData.imageUrls['{{type}}'], $index)">-</button>
    </span>
</div>

Inside this HTML, I need to access the "type" attribute value specified when the directive is used in DOM such as below.

<question-image type="optionAImages"></question-image>
<question-image type="optionBImages"></question-image>

How do I get "type" attribute value inside the template html?

Update: Added the 'link' function in the directive definition. I was able to get the type but its value is always the last directive usage. i.e I always see optionBImages value for type attribute. optionAImages value is not available.

@underscore I can not isolate the scope as I need lot of functionality from the parent controller. Also See my update — suman j
– suman j, Commented Dec 28, 2014 at 5:08

Mostafa Ahmed · Accepted Answer · 2014-12-28 18:45:27Z

2

the problem comes from the scope:false statement as as the second call of the question-image directive override the parameter changed by the first call of the same parameter

you need to change the scope:false to be scope:true

this will not create an isolated scope but it will give the directive a nested scope of the parent scope of the controller.

answered Dec 28, 2014 at 18:45

Mostafa Ahmed

6615 silver badges7 bronze badges

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

Comments

byrdr · Accepted Answer · 2014-12-28 05:30:37Z

1

 return {
           restrict : 'E',
           scope : {
           type : '@'
        },
           templateUrl : 'templates/questionImage.html'

This is equivalent to

scope.type = attrs.type;

answered Dec 28, 2014 at 5:30

byrdr

5,52712 gold badges50 silver badges80 bronze badges

Collectives™ on Stack Overflow

How to access the attribute of angular directive in templateUrl html content

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related