Unable to load more than one controller in a single partial view using AngularJS

I am having trouble loading a second controller to populate a select in my view. Despite my efforts, it just won't cooperate. This is the code snippet I'm using:

app.js

(function() {
'use strict';

angular
    .module('app.lazyload')
    .constant('APP_REQUIRES', {
      scripts: {
        'modernizr':          ['vendor/modernizr/modernizr.custom.js'],
        'icons':              ['vendor/fontawesome/css/font-awesome.min.css',
                               'vendor/simple-line-icons/css/simple-line-icons.css'],
        'companiesCtrl':      ['app/js/modules/companies/data.js','app/js/modules/companies/controller.js'],
        'companyDetailCtrl':    ['app/js/modules/companies/data.js','app/js/modules/companies/controller_detail.js'],
        'documentTypeCtrl':    ['app/js/modules/document_type/data.js','app/js/modules/document_type/controller.js']

    });

})();
////////////////////////////////////
.state('app.companies.detail', {
          url :'/companies.detail/',
          title : 'Company',
          templateUrl : helper.basepath('companies/companies.detail.html'),
          resolve : helper.resolveFor('companyDetailCtrl','documentTypeCtrl'),
          controller : ('companyDetailCtrl')
      })
      .state('app.companies.document_type', {
          url :'/companies.detail/',
          title : 'Document Type',
          templateUrl : helper.basepath('companies/companies.detail.html'),
          controller : ('documentTypeCtrl')
      })

company.detail/controller.js

(function() {
'use strict';
angular
    .module('assets4')
    .controller('companyDetailCtrl', companyDetailCtrl);

companyDetailCtrl.$inject = ['$scope','Data','$log', '$state'];

function companyDetailCtrl($scope, Data, $log, $state){
    $log.log('Controller > companyDetailCtrl loaded');
    Data.get('companies/'+$scope.company_id).then(function(data){
        $scope.companyDetail = data[0];
    });
};
})();

document_type/controller.js (this file is loaded correctly in browser)

(function() {
'use strict';
angular
    .module('assets4')
    .controller('documentTypeCtrl',documentTypeCtrl)

documentTypeCtrl.$inject = ['$scope','DataDocType','$log'];

function documentTypeCtrl($scope, DataDocType, $log, $state) {
    DataDocType.get('document_type').then(function(data){
        $scope.document_type = data;
        $log.log('Controller > documentTypeCtrl loaded');
    });
};
})();

EDIT > added companies/controller.js

(function() {
'use strict';
angular
    .module('assets4')
    .controller('companiesCtrl', companiesCtrl)

companiesCtrl.$inject = ['$scope','Data','$log', '$state'];

function companiesCtrl($scope, Data, $log, $state) {
    Data.get('companies').then(function(data){
        $scope.companies = data;
        $log.log('Controller > companiesCtrl loaded');
    });

    $scope.onRowClick = function(company_id){
        $scope.company_id = company_id;
        $state.go('app.companies.detail');
    };
};  
})();

EDIT > added companies.html

<div class="row" ng-controller="PanelsCtrl as panel">
<div class="col-xs-12">
    <div class="panel panel-default" >
        <div class="panel-heading">&nbsp;
            <paneltool tool-refresh="traditional"></paneltool>
        </div>
        <div class="panel-body">
            <div ui-view>
                <div class="table-responsive">
                    <table id="companiesGrid" class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>{{ 'companies.grid.NAME' | translate }}</th>
                                <th>{{ 'companies.grid.DOCUMENT' | translate }}</th>
                                <th>{{ 'companies.grid.ADDRESS' | translate }}</th>
                                <th>{{ 'companies.grid.PHONE1' | translate }}</th>
                                <th>{{ 'companies.grid.EMAIL' | translate }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="company in companies track by $index" ng-class="{'active': company.company_id}" ng-click="onRowClick(company.company_id)">
                                <td>{{company.company_id}}</td>
                                <td>{{company.company_name}}</td>
                                <td>{{company.company_document_number}}</td>
                                <td>{{company.company_address}}</td>
                                <td>{{company.company_phone1}}</td>
                                <td>{{company.company_email}}</td>
                            </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

EDIT > added companies.detail.html

<form role="form" class="form-horizontal"gt;
<div class="form-group">
    <label class="col-lg-2 control-label">{{'companies.grid.ID' | translate}}</label>
    <div class="col-lg-10">
        <input type="text" placeholder="" class="form-control" ng-model="companyDetail.company_id" disabled/>
    </div>
</div>
<div class="form-group">
    <label class="col-lg-2 control-label">{{'companies.grid.NAME' | translate}}</label>
    <div class="col-lg-10">
        <input type="text" placeholder="" class="form-control" ng-model="companyDetail.company_name"/>
    </div>
</div>
<div class="form-group mb">
   <label class="col-lg-2 control-label">Chosen Ajax</label>
   <div class="col-lg-10">
      <select chosen="" ng-model="document_type" ng-options="s for s in form.states" width="'100%'" class="chosen-select input-md">
         <option value=""></option>
      </select>
   </div>
</div>
... <!-- Additional form fields-->
</form>

app.company.detail is functioning perfectly and populating the entire form.
I have also tried using `ng-controller` but unfortunately, nothing seems to work. I am unable to access this specific code

$log.log('Controller > documentTypeCtrl loaded');

Could someone please point out what I might be doing wrong? As a newcomer to Angularjs, any guidance would be greatly appreciated.

Thank you.

Answer №1

Configured routes to load controllers.

Answer №2

It appears that you forgot to include "$state" in the inject statement:

WRONG

   documentTypeCtrl.$inject = ['$scope','DataDocType','$log'];

CORRECTED

   documentTypeCtrl.$inject = ['$scope','DataDocType','$log','$state'];

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

Updating the styles of React Native components using stylesheets

I've created a unique React component with the following structure: import { StyleSheet } from 'react-native'; import { Input, Item } from 'native-base'; import Icon from 'react-native-vector-icons/FontAwesome'; import { ...

Dealing with Javascript exceptions and sending email notifications in Django

I appreciate the traditional method of handling server-side exceptions in Django using Python. I am interested in finding a similar approach for client-side exception handling in JavaScript. So far, I have come across only one option which is DamnIT, but ...

What is the best way to access a database connection throughout an entire node.js application?

In my application's app.js file, I establish a connection to mongodb using the monk module. var express = require('express'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var mong ...

The Cascading of Bootstrap Card Designs

Looking for some assistance with my TV Show Searcher project that is based on an API. The functionality is complete, but I'm struggling to get the Bootstrap cards to stack neatly without any empty space between them. I want it to resemble the image ga ...

What is the best way to evaluate a sequence of actions and their outcomes?

Recently, I've dived into the world of writing automated tests for a React application. Along the way, I encountered some intriguing questions about the best approach to testing a series of interactions within the app. Let's imagine a scenario w ...

ng-if directive does not show data in AngularJS

I have a dynamic collection of images and videos that I want to display one at a time. Specifically, when I click on an image ID, I want it to show the corresponding image, and when I click on a video ID, I want it to show the relevant video. Below is the ...

AngularJS `addClass` function is failing to apply styles

Struggling to implement addClass in AngularJS, experiencing issues where it works on Parent Menu Items but not on Sub Items. In a nested UL and LI structure, clicking on a Parent LI triggers the ParentLi function which successfully adds a "focused" class ...

Sorting JSON data using JQuery Ajax

I've encountered an issue with sorting JSON data. Here is the JSON data I'm working with: [ { nom: "TERRES LATINES", numero: "0473343687", image: "http://s604712774.onlinehome.fr/bonapp/api/wp-content/uploads/2016/12 ...

Are toggle functionalities triggered when an element is clicked?

How come the span triggers functions a and b when first clicked, is there a way to set it up so that it calls function a on the first click and then function b on the second click? function a(id) { $.post("url.php", {'id':id}, function() { ...

Vue 2 draggable does not maintain reactivity when the v-model value consists of a parent tag's iterable

Utilizing Vue 2 alongside Vuex, the incoming object gets organized into distinct sub-objects according to the classCategory value. Could it be failing because the v-model value in draggable is a key sourced from the parent tag object? <div class="c ...

Position the Bootstrap Modal at the start of the designated DIV

When using a Bootstrap Modal to display larger versions of thumbnails in a photo gallery, there can be some challenges. The default behavior of Bootstrap is to position the modal at the top of the viewport, which may work fine in most cases. However, if th ...

Generating a JavaScript object from a string to optimize its compatibility with datatables

This inquiry pertains to the plugin available at: var hidecols = '{"sClass": "Hide", "aTargets": [0]},{"sClass": "asdf", "aTargets": [1]},{"sClass": "qwer", "aTargets": [2]}'; var hidecolsobj = eval('(' + hidecols + ')'); ...

Valid method of confirming a user's login status

Using AJAX requests, I have implemented a user area on my website. The "Log off" button is supposed to be displayed only when the user is logged in. Here is the AJAX request for logging in a user: function requestSI() { var xhr = getXMLHttpRequest(); xhr ...

An issue arises with ReactJS MaterialUI Stepper when there is an overflow

My struggle with the Material UI Stepper component persists as I attempt to make it suit my requirements, specifically to display multiple steps and handle overflow. However, it stubbornly continues to misbehave by showing unusual separators when there is ...

Is there a way to personalize the chart tooltip in jqplot to fit my preferences?

I have a chart that displays data. I would like the x-axis labels to show in the format MM/DD, and in the tooltip, I want to display data in the format HH:y-axis. For example, in the chart below, I want the x-axis labels to be 'Oct 15','Oct ...

How can you create an event that is focused on options using Material-UI's Autocomplete feature?

This is regarding Material-UI's Autocomplete feature. I am looking for a way to track which autocomplete choice the user is currently focused on, whether it be through hovering over with the mouse or using keyboard arrows - before any actual selection ...

All fields in the form are showing the same error message during validation

This is the HTML code: The form below consists of two fields, firstname and lastname. Validation Form <form action="" method="post"> Firstname : <input type="text" placeholder="first name" class="fname" name="fname" /> <span class= ...

Error in Angular ESLint: The key parameter is mandatory

I'm attempting to download a file using the Angular code below, but I consistently receive an error stating Parameter "key" required const headerValues = new HttpHeaders({ 'Content-Type': contentType!, 'Accept': contentTy ...

Creating JOIN tables within the create action involves assigning related ids to each table

I am currently working on a room reservation system that involves including options for each room. Data related to the options and their join table, reservation_options, are successfully inserted into the params. However, I am facing an issue with assignin ...

Ignoring @ExceptionHandler in Spring Security for Ajax requests

In my project, I have a controller that manages all exceptions defined as follows: @ControllerAdvice public class GlobalExceptionHandlingController { @ResponseBody @ExceptionHandler(value = AccessDeniedException.class) public ResponseEntity a ...