Numerous Controllers in AngularApp failing to function properly

One issue I'm encountering is that only one out of the two controllers within my app seems to be registered:

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

app.controller('FruitCtrl', function($scope) {
    $scope.fruits = ['apples', 'oranges', 'bananas'];
});

app.controller('VegetableCtrl', function($scope) {
    $scope.vegetables = ['potato', 'beans', 'onions'];
});

This is how my template looks:

<div ng-app="MyModule">

    <div ng-controller="FruitCtrl">
        <div ng-repeat="fruit in fruits">{{fruit}}</div>
    </div>

    <div controller="VegetableCtrl">
        <div ng-repeat="vegetable in vegetables">{{vegetable}}</div>
    </div>

</div>

Currently, only the "fruits" section is being rendered on the page.

If you'd like to see a demonstration, I have also created a JS fiddle at http://jsfiddle.net/doque/9wfhsgqf/2/

Answer №1

directive="FruitCtrl"

must be

ng-directive="FruitCtrl"

Answer №2

It appears that you forgot to include the ng- prefix for ng-controller in the vegetables repeat section.

Check out this link for more information

<div ng-app="MyModule">

<div ng-controller="VegetableCtrl">
    <div ng-repeat="vegetable in vegetables">{{vegetable}}</div>
</div>

<div ng-controller="FruitCtrl">
    <div ng-repeat="fruit in fruits">{{fruit}}</div>
</div>

Answer №3

alteration from

<div controller="FruitCtrl">

to

<div ng-controller="FruitCtrl">

Answer №4

substitute

<div component="FruitComponent">

for

<div ng-component="FruitComponent">

Answer №5

Ensure to include 'ng-' in the second div attribute, it is supposed to be 'ng-controller' instead of just controller

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to inspecting file contents with Node.js

I am working on viewing the content of a file that is posted from the client using the fs module. However, with the code below, the contents are coming up as undefined. Can anyone help me identify what is missing in the code? To ensure I am receiving the ...

The jQuery window.on event is not functioning when trying to handle the same hash change

How to fix jQuery window.on hashchange issue when clicking on the same hash? See the code snippet below for a potential solution: function addMargin() { let header = $('.header__wrapper').outerHeight(); let headerHeight = $('body& ...

Altering CSS styles through JavaScript or jQuery

Exploring Options After investigating the use of .css() to manipulate CSS properties of specific elements, I came across a website showcasing the following CSS: body, table td, select { font-family: Arial Unicode MS, Arial, sans-serif; font-size: ...

What could be the reason for the ReferenceError that is being thrown in this code, indicating that '

let number = 1; console.log(number); Feel free to execute this basic code snippet. You may encounter an issue: ReferenceError: test is not defined, even though the variable was declared. What could be causing this unexpected behavior? ...

Tips for selecting array [0] and turning it into a clickable link with JavaScript

My challenge lies in redirecting to a different URL when the user clicks on <a href="javascript:void(0)">Hotel Selection</a>. Below is my current progress. Grateful for any assistance! <div id="menu"> <ul> <li class= ...

Steps for Adding a class or Id to an Ext.Msg.alert box

Is there a way to customize the style of a specific Ext alert box without affecting all alert boxes? Can someone please explain how to assign a class or ID to an Ext.Msg.alert box? Ext.Msg.alert('Status', 'Changes saved successfully.' ...

Creating a custom preloader for your ngRepeat in AngularJS

When utilizing the infinite scroll technique along with ng-repeat, my goal is to show a preloader while the directive completes adding items to the DOM. Can you suggest the most straightforward approach to achieve this? ...

CSS: Creating a dynamic layout to center the card on screens of all sizes

My code currently places the profile card in the center of the screen regardless of screen size, but it often appears too small. How can I adjust the positioning of the profile card to almost fill the screen? @import url("https://fonts.googleapis.com/cs ...

Is it possible to configure the Eclipse Javascript formatter to comply with JSLint standards?

I'm having trouble setting up the Eclipse Javascript formatting options to avoid generating markup that JSLint complains about, particularly with whitespace settings when the "tolerate sloppy whitespace" option is not enabled on JSLint. Is it possible ...

Visualizing Data with d3.js Radar Charts Featuring Image Labels

After following a tutorial on creating a d3.js radar chart from http://bl.ocks.org/nbremer/21746a9668ffdf6d8242, I attempted to customize it by adding images to the labels. However, I encountered an issue with aligning the images properly. You can view my ...

In React, components will consistently render the initial code

I have a chat application that requires authentication and uses cookies. Here's what I've been attempting: class AppHeader extends React.Component { constructor(props) { super(props) } render() { if (cookies.get(' ...

Employing the ng-token-auth function for logging in and submitting to an alternate URL

Currently, I am utilizing ng-token-auth along with angular/ionic to interact with a rails api. My focus right now is on the login page where I have implemented the following form: <form ng-submit="submitLogin(loginForm)" role="form" ng-init="loginForm ...

Ways to verify whether any of the variables exceed 0

Is there a more concise way in Typescript to check if any of the variables are greater than 0? How can I refactor the code below for elegance and brevity? checkIfNonZero():boolean{ const a=0; const b=1; const c=0; const d=0; // Instead of ma ...

Using JavaScript to dynamically alter the background image of an HTML document from a selection of filenames

Just starting out with JavaScript and working on a simple project. My goal is to have the background image of an HTML document change to a random picture from a directory named 'Background' every time the page is opened. function main() { // ...

Uncovering the Secrets of Accessing Tag Attributes in ReactJS

I have developed a small app using reactjs. I have set an attribute on the button tag and passed a value to it. Now, when I click on the button, I want to retrieve the attribute value. How can I achieve this with react js? Here is a sample code snippet: ...

Incorporating additional information into the database

When I run the code, I see a table and a button. After entering data in the prompts as instructed, the table does not get updated. I'm unsure why this is happening. Can someone please explain? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...

Loading Java Script files in real-time

Is there a method to dynamically load JS files before "$(document).ready" is triggered, while still having them available in the ready event handler? Is there a feature in jQuery that allows for this process? The challenge I am facing involves loading di ...

Ways to adjust the size of the parent element based on the height of a specific element

I am faced with a situation where I need to identify all elements belonging to a specific class and adjust the padding-bottom of their parent div based on the height of the matched element. For example, consider the following structure: <div class=&ap ...

Blur images on parent div when hovering using javascript

After some extensive searching, I came across a few helpful explanations on how to achieve my desired outcome. By combining them, I was able to get everything working smoothly with the hover effect over the image itself. However, when I attempted to trigge ...

"User-friendly Material-UI input field paired with a clear label

Seeking guidance on creating a text field with a label using the material-ui library. I am searching for something similar to this example: https://github.com/callemall/material-ui/blob/master/src/TextField/TextFieldLabel.jsx Unfortunately, I have been ...