The application is functional, however, the initial controller within is experiencing difficulties

Question

The application is functional, however, the initial controller within is experiencing difficulties

Setting up a controller in my application based on a tutorial. The first two divs are displaying correctly but the ContraAss controller is not rendering and only shows {{info}}. What am I missing here? (NB. Probably something simple, but with limited experience and frustration over intellisense issues, I'm stuck.)

This is the XML code:

<body>
  <div ng-app="ApplicationHolder">
    <div>Uno: "{{holderUno}}"</div>
    <div>Duo: "{{holderDuo}}"</div>
    <div ng-controller="ContraAss">{{info}}</div>
  </div>
</body>

And this is the JS code:

var application = angular.module("ApplicationHolder", []);

application.run(function ($rootScope) {
  $rootScope.holderUno = "Blipp";
});

application.controller("ContrAss", function($scope) {
  $scope.info = "This is an info carrier";
});

Output:

Uno: "Blipp"
Duo: ""
{{info}}

Initially thought it was a scope issue, but both HolderDuo and ContraAss are showing empty. Now suspecting the controller may not be recognized at all.

Any suggestions on how to fix this?

javascript angularjs scope

Answer 1

Answer №1

There seems to be a discrepancy (typo) between the controller name in your HTML and JS files.

The HTML code is expecting a controller named ContraAss, but in your JavaScript file, it is defined as ContrAss. This means that the controller does not exist, resulting in an error being thrown in your console (which is a helpful first step to troubleshoot when you are unsure about the behavior of your JavaScript code).

To resolve this issue, update your controller definition to:

myApp.controller("ContraAss", function($scope) {
  $scope.info = "This carries important information";
});

Answer 2

There seems to be a discrepancy (typo) between the controller name in your HTML and JS files.

The HTML code is expecting a controller named ContraAss, but in your JavaScript file, it is defined as ContrAss. This means that the controller does not exist, resulting in an error being thrown in your console (which is a helpful first step to troubleshoot when you are unsure about the behavior of your JavaScript code).

To resolve this issue, update your controller definition to:

myApp.controller("ContraAss", function($scope) {
  $scope.info = "This carries important information";
});

Answer 3

Answer №2

Upon feedback from @Starscream1984 in the comments section of ContraAss, I have updated the controller name to ContrAss (and also changed the application name to myApp):

HTML:

<body>
  <div ng-app="myApp">
    <div>Uno: "{{holderUno}}"</div>
    <div>Duo: "{{holderDuo}}"</div>
    <div ng-controller="ContrAss">{{info}}</div>
  </div>
</body>

JS:

var myApp = angular.module("myApp", []);

myApp.run(function ($rootScope) {
  $rootScope.holderUno = "Blipp";
});

myApp.controller("ContrAss", function($scope) {
  $scope.info = "This is an info carrier";
});

Link to JSfiddle: http://jsfiddle.net/ghorg12110/HB7LU/19922/

Answer 4

Upon feedback from @Starscream1984 in the comments section of ContraAss, I have updated the controller name to ContrAss (and also changed the application name to myApp):

HTML:

<body>
  <div ng-app="myApp">
    <div>Uno: "{{holderUno}}"</div>
    <div>Duo: "{{holderDuo}}"</div>
    <div ng-controller="ContrAss">{{info}}</div>
  </div>
</body>

JS:

var myApp = angular.module("myApp", []);

myApp.run(function ($rootScope) {
  $rootScope.holderUno = "Blipp";
});

myApp.controller("ContrAss", function($scope) {
  $scope.info = "This is an info carrier";
});

Link to JSfiddle: http://jsfiddle.net/ghorg12110/HB7LU/19922/

The application is functional, however, the initial controller within is experiencing difficulties

Answer №1

Answer №2

Similar questions

Retrieving the value of onCheck from the Checkbox/ListItem

AngularJS ng-model not refreshing its data

How can I create a Discord bot command that ignores case sensitivity?

Utilize the Masonry layout script on dynamically generated elements from AJAX requests

Issue with a Bootstrap panel displaying incorrect border formatting

Attempting to display a larger version of an image sourced from miniature versions fetched with the assistance of PHP and

Angular.js filters provide the ability to apply dynamic values as well as set default

Converting SVG to PNG image directly in the browser (compatible with all browsers, including Internet Explorer)

Learn how to incorporate the dynamic array index value into an Angular HTML page

When the user presses the enter key to submit data, the Ajax page reloads

Add objects to a web address that leads nowhere but can still be linked to

Display a pop-up window upon clicking anywhere on the webpage using jQuery and HTML

Unable to communicate between react components

The node.js application was unable to locate the '../HMS/server/models/user' file

Steps for modifying material-ui timepicker to display time in a 24-hour format

Encountered a "no login transports available" error while trying to use Firebase

`Jump-start Your Development with jQuery Lightbox Centering`

Utilizing React JS to assign various state values from a dropdown menu selection

I need some clarification on the role and responsibilities of the "$scope" variable in AngularJS

Transform a date string into a date entity