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

Encountering the error message "React child cannot be an object" while trying to map over an imported object referencing components

I have an array in a separate file that I import and iterate over in another component. One of the properties within this array, labeled component, actually refers to a different individual component. I am attempting to render this component, but I keep e ...

Why is it considered bad practice to utilize cacheStorage outside of a serviceWorker?

According to the information provided on the https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage page: The CacheStorage interface serves as the storage for Cache objects, maintaining a directory of all named caches accessible to ServiceWorker, ...

Tips for modifying hover effects using jQuerystylesheet changes

I attempted running the following code snippet var buttonElement = $('<button>Button</button>'); $('body').append(buttonElement); buttonElement.hover().css('background-color', 'red'); Unfortunately, the ...

Trigger a function when a button is clicked

This is an ongoing project that includes a calculator and other features. Right now, I am working on a functionality where when you input a number into the calculator results and press "+", it should trigger onClick to check if the input was an integer o ...

Rearrange the order of items in the fancybox gallery

Typically, fancybox displays items in the gallery based on the order they are added in the HTML code. Is there a way to customize the order of items when they are opened in the popup, while keeping the original order when displayed on the page? The solut ...

Choose a row from a table by utilizing AJAX with jQuery

Need help with deleting specific table rows using AJAX? The goal is to send the ID and Printer Type values from the table data cells when a row is selected for deletion. <table class="u-full-width" > <thead> <tr> ...

Using Object Values and Subvalues to Assign Element Attributes in jQuery

I have a weekly schedule that I update regularly using a static table layout: <table> <tr class="live gm fsp"> <td>Oct. 7</td> <td>12:30 pm</td> <td class="prog">Show 1</td> <td>Team ...

The status is currently not defined when attempting to retrieve JSON data and display it on individual pages for each piece of data

I have written some code where I am trying to display the attributes of a selected product from my product page based on its ID. For example, when a product is clicked, it should redirect to a URL like /#/product/2 and display all the attributes of the pro ...

Obtain the Key with the Greatest Value from a JSON Object

I'm currently working with data fetched from an API response in an attempt to identify the pitch with the highest speed. Below is a snippet from the API response. { page: 1, total_pages: 4, listings: [ { name: "Zack Greinke", pitc ...

Store the value returned from either the URI or the response in the test context using Cypress IO

I am struggling to figure out how to extract a specific portion of a key from both the URL and the xhr response. I initially attempted using the URI method but couldn't specify to save only part of the value. .url().then(($url) => { co ...

Browsing using the "touchmove" feature feels extremely laggy

I implemented a workaround to achieve "position:fixed" on mobile devices, specifically my Android device. This involved creating two divs with heights that combined to match the screen height through JavaScript, and adding touch listeners to the bottom div ...

Merge the Angular JS project with the Web Api project

In my current Play project, I have integrated an Angular Front-end using Gulp. Now, I am looking to reuse the angular code in a .Net Web-Api project. Separating APP and API into different projects may work, but to avoid issues with ports and CORS, the best ...

Create a search feature based on names utilizing Node Express in conjunction with SQL database

After deciding to create an API with a search feature using SQL queries in node express, this is how I structured my code: app.get('/search/:query', (req, res) => { pool.getConnection((err, connection) => { if(err) throw err ...

Display the same DIV element across various HTML tabs

When two different tabs are clicked, I need to display a set of 10 Search Fields. Both tabs have the same fields, so instead of using separate DIVs, I want to use the same DIV and only change the AJAX REST End-Point based on the selected TAB. Can someone ...

Retrieval of jQuery remove() method

Essentially, I am utilizing an OnClick function to delete a DIV. Once the OnClick is triggered, it invokes the remove() jQuery function to eliminate the div. Below is my code that implements the removal using remove(): <div id="add"> <button typ ...

Transforming JSON information into a Backbone Model accompanied by a child Collection

Currently, I am dealing with a Playlist object that comes with various properties to define itself, along with a collection of PlaylistItems. Upon receiving data from the server, the JSON response is processed in the client-side success method: success: ...

Having trouble printing a section of a webpage after making CSS adjustments

When trying to print part of a page, I used the following method. It successfully prints that portion of the page, however, it does not preserve the CSS effects. <body> <h1><b><center>This is a test page for printing</center&g ...

Navigate to a different page using an AJAX request

Is it possible to use ajax for redirecting to another page? Here's the code I've been working on: <script type="text/javascript"> $(document.body).on('click', '#btnPrintPrev', function() { $.ajax({ url: &apo ...

I am not getting any reply in Postman - I have sent a patch request but there is no response showing up in the Postman console

const updateProductInfo = async (req, res) => { const productId = req.params.productId; try { const updatedProduct = await Product.findOneAndUpdate({ _id: productId }, { $set: req.body }); console.log("Product updat ...

Encountering a 500 error while trying to access the document page in a Next.js Vercel app after

I am facing an issue with my next.js app hosted on Vercel, where I keep receiving a 500 error when trying to load a specific page. Upon inspecting the Chrome dev tools, I noticed that the error occurs when attempting to access the /dashboard page. Despite ...