Indication of a blank tab being displayed

Question

Indication of a blank tab being displayed

I'm struggling to get my Angular directives working in my project. I've tried implementing a basic one, but for some reason it's not showing anything on the screen. Can anyone help me troubleshoot this issue?

Here is my JS code:

angular
        .module('app.admin.catalog.nutritional_facts')
        .directive('nutritionalInfo', nutritionalInfo);

function nutritionalInfo(){

    return{
        restrict: 'E',
        scope: {
            quantity: '=',
            unit: '='
        },
        template: "<div> Hello world {{ '{{quantity.qty}} {{unit.u}}' }}</div>"  
    };
}

This is how I'm using it in my HTML file:

<nutritional-info quantity="{qty:4}" unit="{u:'g'}"></nutritional-info>

Despite trying various data types as attributes, all I see is an empty label instead of "Hello world". As a beginner in Angular, this problem has got me stumped. Any suggestions would be greatly appreciated.

javascript angularjs angularjs-directive

Answer 1

Answer №1

I have made the necessary corrections to your code below in order to ensure that your directive functions correctly: Working Fiddle

Modifications Made :

Adjusted directive name to camel case
Fixed the angular binding in the HTML
Corrected the syntax of the objects being passed to the directive.

HTML :

<nutritional-info quantity="{qty:4}" unit="{u:'g'}"></nutritional-info>

Controller :

angular.module('app.admin.catalog.nutritional_facts', [])
    .directive('nutritionalInfo', nutritionalInfo);
    
function nutritionalInfo(){

 return{
    restrict: 'E',
    scope: {
        quantity: '=',
        unit: '='
    },
    template: "<div> Hello world {{quantity.qty}} {{unit.u}}</div>"  
 };
}

Answer 2

I have made the necessary corrections to your code below in order to ensure that your directive functions correctly: Working Fiddle

Modifications Made :

Adjusted directive name to camel case
Fixed the angular binding in the HTML
Corrected the syntax of the objects being passed to the directive.

HTML :

<nutritional-info quantity="{qty:4}" unit="{u:'g'}"></nutritional-info>

Controller :

angular.module('app.admin.catalog.nutritional_facts', [])
    .directive('nutritionalInfo', nutritionalInfo);
    
function nutritionalInfo(){

 return{
    restrict: 'E',
    scope: {
        quantity: '=',
        unit: '='
    },
    template: "<div> Hello world {{quantity.qty}} {{unit.u}}</div>"  
 };
}

Answer 3

Answer №2

Here are some issues to address:

NutritionalInfo should be written as nutritionalInfo in camelCase format for Angular to recognize it as a directive associated with the <nutritional-info> HTML tag. For more information, refer to Directive Normalization.
Ensure that you pass objects correctly to the directive. Change quantity="{qty=4}" to quantity="{qty: 4}".
Make sure to evaluate expressions properly in the template. Instead of
```
{{ '{{quantity.qty}} {{unit.u}}' }}
```
, use {{quantity.q}} {{unit.u}}. Angular expressions function similar to JavaScript code executed within the current scope, allowing complex constructions like
```
{{quantity.q.toFixed(1) + ' ' + unit.u.toUpperCase()}}
```
resulting in 4.0 G. Refer to Angular expressions for more details.

By implementing these adjustments, you can view a functional demonstration.

Answer 4

Here are some issues to address:

NutritionalInfo should be written as nutritionalInfo in camelCase format for Angular to recognize it as a directive associated with the <nutritional-info> HTML tag. For more information, refer to Directive Normalization.
Ensure that you pass objects correctly to the directive. Change quantity="{qty=4}" to quantity="{qty: 4}".
Make sure to evaluate expressions properly in the template. Instead of
```
{{ '{{quantity.qty}} {{unit.u}}' }}
```
, use {{quantity.q}} {{unit.u}}. Angular expressions function similar to JavaScript code executed within the current scope, allowing complex constructions like
```
{{quantity.q.toFixed(1) + ' ' + unit.u.toUpperCase()}}
```
resulting in 4.0 G. Refer to Angular expressions for more details.

By implementing these adjustments, you can view a functional demonstration.

Answer 5

Answer №3

Below is the complete solution I came up with:

<!doctype html>
<html lang="en" ng-app="app.admin.catalog.nutritional_facts">
<head>
    <meta charset="UTF-8">
    <title>Custom Title</title>

</head>
<body >

<nutrition-analysis amount="{qty: 3}" measurement="{u: 'g'}"></nutrition-analysis>

<script
        src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js">
</script>

<script>

    function nutritionAnalysis(){
        return {
            restrict: 'E',
            scope: {
                amount: '=',
                measurement: '='
            },
            template: "<div> Greetings '{{amount.qty}} {{measurement.u}}'</div>"
        };
    }

    angular
            .module('app.admin.catalog.nutritional_facts', [])
            .directive('nutritionAnalysis', nutritionAnalysis);


</script>
</body>
</html>

Answer 6

Below is the complete solution I came up with:

<!doctype html>
<html lang="en" ng-app="app.admin.catalog.nutritional_facts">
<head>
    <meta charset="UTF-8">
    <title>Custom Title</title>

</head>
<body >

<nutrition-analysis amount="{qty: 3}" measurement="{u: 'g'}"></nutrition-analysis>

<script
        src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js">
</script>

<script>

    function nutritionAnalysis(){
        return {
            restrict: 'E',
            scope: {
                amount: '=',
                measurement: '='
            },
            template: "<div> Greetings '{{amount.qty}} {{measurement.u}}'</div>"
        };
    }

    angular
            .module('app.admin.catalog.nutritional_facts', [])
            .directive('nutritionAnalysis', nutritionAnalysis);


</script>
</body>
</html>

Indication of a blank tab being displayed

Answer №1

Answer №2

Answer №3

Similar questions

Issue with function not being triggered upon using the .click event

"How can I dynamically set the text for a radio button using Reactive Forms? Also, how do I capture the selected radio button value and the question title

Sending data using the AJAX method with integers

Leverage the power of JSON to efficiently represent a collection of string

Managing data binding and events in AngularJS 2.0

Create a dropdown menu using a PDO query to populate the selectable options

Hiding content and troubleshooting video playback problems in FancyBox

Getting data for Selectize.js

Steps to eliminate pre-chosen alternatives upon loading select control?

Toggle divs by using a checkbox (Vue.js)

Modify the href attribute of an anchor tag that does not have a specified class or

Why is my "npm install" pulling in unnecessary libraries that I didn't even mention?

Uploading files into an array using Angular 2

Is indexed coloring available for vertices in three.js?

AngularJS: resolving route dependencies

Authenticating the Gmail API using a specified user ID

Creating a multi-dimensional array using information from a database

Despite functioning properly when triggered from the debug console, the jQuery AJAX request fails to work upon page load

Enhance the readability of your Angular/Ionic applications with proper hyphenation

Develop a CakePHP CRUD view using a JavaScript framework