I have an angularjs template where some of the ngModel variable are empty. They are all attached to a html element. I am very confused as to how to create an angularjs element that all this html elements would inherit so that if a variable is empty or does not have anything inside its content then it should display a default content. This is what i have done currently.

    <h3 ng-bind="name">Student's name</h3>
    <p ng-bind="description"> More about the programme</p>
    <h2 ng-bind="title">Details about the programme for the whole years</h2>

So instead of this area been empty because there is nothing there I would want it to display the default text shown. I think it is a drirective matter but I am not really that good with it

CodePudding user response：

You can apply below simple solutions-

1. Set an expression to ng-bind

<h3 ng-bind="name || 'Student\'s name'"></h3>
<p ng-bind="description || 'More about the programme'"></p>
<h2 ng-bind="title || 'Details about the programme for the whole years'"></h2>

Note: Escape character "" is added in the default text

2. Use expression as element content instead of ng-bind, but ng-bind is prefferred option.

    <h3>{{name || "Student's name"}}</h3>
    <p>{{description || "More about the programme"}}</p>
    <h2>{{title || "Details about the programme for the whole years"}}</h2>

3. Writing getters in the Component/Controller class of the directive for all these properties.

In the getter function, you can decide to return default values as fallback when values are not to these properties.

About creating parent element/directive:

Even if you create a generic directive, the default values are distinct for each use case. So you will end up writing more or less similar code to set default values to new element/directive.