AngularJS directive with custom template

Question

I'm new to angular, and I'm trying to solve this problem. I have the following html

<div ng-repeat="el in elements">
    <div ng-basicmenuinput basic-input="el"></div>
</div>

and in controller I have the following elements

        $scope.elements = [
            {
                type: "A",
                name: "AAA"
            },
            {
                type: "B",
                name: "BBB"
            }

        ];

and I've created the following directive

.directive('ngBasicmenuinput', function () {
    return {
        restrict: 'A',
        replace: true,
        scope: {
            basicInput: "="
        },
        template: function () {
            return '<div class="basicMenuInput">{{basicInput.name}}</div>';
        }
    }
})

now on template function I want to do something like this:

    template: function () {
        if(basicInput.type=="A") // basicInput is undefined
        return '<div class="basicMenuInput">{{basicInput.name}}</div>';
    }

but basicInput is undefined. Basically all I want to do is return a different template based on basicInput.type. Is it okay( in an angular way ) what I did?

Luqman · Accepted Answer · 2015-07-09 16:29:27Z

2

please note. to use your own custom directive inside of your view(html) you need to take note of the naming convention. if you name ur directive ngBasicMenuInput, then its going to get normalised into " ng-basic-menu-input " taking into consideration the camelCase.

answered Jul 9, 2015 at 16:29

Luqman

1392 silver badges6 bronze badges

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

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Use `ng-if` / `ng-switch` / `ng-show` / `ng-hide`

You can't place a condition like that in the template. instead, assist angular with this view decision in your template like this:

Example using ng-if :

<div ng-if="basicInput.type=='A'" class="basicMenuInput">
   {{basicInput.name}}
</div>
<div ng-if="basicInput.type=='B'">
   ...
</div>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 9, 2015 at 15:40

Jossef Harush Kadouri

34.6k10 gold badges143 silver badges133 bronze badges

Comments

vinayakj · Accepted Answer · 2015-07-10 16:15:37Z

1

template: function () {
        return '<div ng-if=basicInput.type=="A" class="basicMenuInput">{{basicInput.name}}</div>';
    }

edited Jul 10, 2015 at 16:15

answered Jul 9, 2015 at 15:39

vinayakj

5,7013 gold badges30 silver badges49 bronze badges

2 Comments

Lawrence Aiello Over a year ago

Could you add a description as to how this answers the question?

vinayakj Over a year ago

@LawrenceAiello ng-if would add the dom to the document only if condition basicInput.type=="A" evaluates to true, and thats what OP wanted.

Collectives™ on Stack Overflow

AngularJS directive with custom template

3 Answers 3

Comments

Use `ng-if` / `ng-switch` / `ng-show` / `ng-hide`

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Use ng-if / ng-switch / ng-show / ng-hide

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related

Use `ng-if` / `ng-switch` / `ng-show` / `ng-hide`