AngularJS: Issue with Variable Value Rendering

Question

AngularJS: Issue with Variable Value Rendering

I recently started working with Angular. In my JavaScript file, I have the following code:

App.controller('ProductController', ['$scope', 'ProductService', function ($scope, ProductService) {
    console.clear();
    console.log('startX');
    $scope.price = '$55.6';
}]);

When it comes to the view, this is what I have:

<div class="bloc-bleu">
   <div class="f" ng-controller="ProductController">
     <p><span>{{ price }}</span><!-- instead of <span class="old price">1250€</span> --></p>

However, I am facing an issue where I cannot retrieve the value of price in the view.

Update: Upon checking the console, I noticed this error message:

https://i.sstatic.net/W0w4z.png

javascript angularjs

Answer 1

Answer №1

Don't forget to initialize your module and include ng-app in your HTML file.

Check out this working snippet:

var app = angular.module('app', []);

app.controller('ProductController', function ($scope) {
    console.clear();
    console.log('startX');
    $scope.price = '$55.6';
});

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body>
   <div class="bloc-bleu">
     <div class="f" ng-controller="ProductController">
       <p><span>{{ price }}</span><!-- Instead of <span class="old price">1250€</span> --></p>
     </div>
   </div>
</body>
</html>

Answer 2

Don't forget to initialize your module and include ng-app in your HTML file.

Check out this working snippet:

var app = angular.module('app', []);

app.controller('ProductController', function ($scope) {
    console.clear();
    console.log('startX');
    $scope.price = '$55.6';
});

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body>
   <div class="bloc-bleu">
     <div class="f" ng-controller="ProductController">
       <p><span>{{ price }}</span><!-- Instead of <span class="old price">1250€</span> --></p>
     </div>
   </div>
</body>
</html>

AngularJS: Issue with Variable Value Rendering

Answer №1

Similar questions

Tips for using the identical function on matched elements

What is the method for defining functions that accept two different object types in Typescript?

Designing a button component with text

Blender Mesh Not Visible in Three.js

Adding Gridster to a WordPress theme

Exploring the Force-Directed Graph Demo on bl.ocks.org

The Bootstrap toggler is failing to conceal

Does the content within {{ }} get monitored for updates on my webpage?

I encountered a frustrating issue with saving user input data using localStorage

Scanner (IE5) impact on page load speeds

Using JavaScript with namespaces in C#

Retrieving JSON data from a form with the help of Angular

SQLite Simplified - A Primer on Fundamentals

Combining the Angular Material Design mdToolbar with the Ionic ion-nav-bar: A Match Made

Selecting objects in Three.js using the camera but without using the mouse

Incorporating Data from a Dictionary into a Highcharts Series

Unable to locate request object during post request

Retrieve the selected status and value of the option that initiates a multiple selection change event

The art of properly parsing JSON in AngularJS

Constructing a new mongoose request without nesting by sending multiple requests