Modal's ng-click not triggering component's function

I am currently working on resolving an issue.

My choice to use AngularJS is intentional, as I prefer not to load the entire NPM of Angular. Additionally, we heavily rely on Razor Syntax for the Web Layer.

Implementation in Create.cshtml file

<button type="button" ng-click="addApp('Cheese')"
        class="btn-sm btn-default no-modal">
  Add Applications
</button>

Below is the directory structure:

WebLayer
+--wwwroot
   +--js
      +--applications (Feature)
         +applications.component.js
         +applications.module.js
         +application.template.html
      +--delegates (Feature)
         +delegates.component.js
         +sames as above
      +--sponsor-applictions
         +same as above

   +--lib
      +angularjs and all other angularjs files
+app.config.js
+app.module.js

In my sponsor-applictions.component.js, I successfully retrieve JSON Object Models arrays from my API.

//Author Moojjoo
//Date 5/3/2019
//sponsor-applications
'use strict';

var testUrl = window.location.hostname;
if (testUrl.includes("localhost")) {
    var apiUrl = 'https://localhost:44364';
}
else if (testUrl.includes("uat")) {
    var apiUrl = 'https://localhost:44364'; //TODO when the URL is decided for UAT
}
else {
    var apiUrl = 'https://localhost:44364'; //TODO when the URL is decided for PRD
}



// Register `sponsorApplications` component, along with its associated controller and template
angular.
    module('App').
    component('sponsorApplications', {
        templateUrl: '../../js/sponsor-applications/sponsor-applications.template.html',
        controller: ['$scope', '$http', function SponsorApplications($scope, $http) {
            var user_id = $("#User_Id").val();

            if (user_id != "") {

                $http.get(apiUrl + '/api/v1/Sponsors/' + user_id + '/Applications').then(function successCallback(response) {
                    $scope.sponsorApplications = response.data;
                    console.log($scope.sponsorApplications);
                }, function errorCallback() {
                    alert('Please try again later, network error, email sent to application administrator')
                });
            }
            
            $scope.addApp = function (arg) {
                debugger;
                console.log(arg);
                alert(arg);
            };

            $scope.remove = function (index) {
                debugger;
                $scope.sponsorApplications.splice(index, 1);
            };           
        }
        ]
    });

While the $scope.remove function works fine, I cannot seem to get the addApp('Cheese') function to trigger upon ng-click. I need help identifying what might be missing. Thank you.

Edit adding full code

app.config

'use strict';

angular.
    module('App').
    config(['$routeProvider',
        function config($routeProvider) {
            $routeProvider.
                when('/Sponsors/Create', {
                    template: '<sponsor-applications></sponsor-applications>'
                }).
                when('/Sponsors/Create', {
                    template: '<applications></applications>'
                }).
                when('/Sponsors/Create', {
                    template: '<sponsor-delegates></sponsor-delegates>'
                }).
                when('/Sponsors/Create', {
                    template: '<delegates></delegates>'
                })
        }
    ]);

app.module.js

'use strict';

angular.module('App', [    
    'ngRoute',    
    'sponsorApplications',
    'applications',
    'sponsorDelegates',
    'delegates'
])
    .run(function () {
        console.log('Done loading dependencies and configuring module!');
    });

sponsor-applications.component.js

//Author Robert B Dannelly
//Date 4/8/2019
//sponsor-applications
'use strict';

var testUrl = window.location.hostname;
if (testUrl.includes("localhost")) {
    var apiUrl = 'https://localhost:44364';
}
else if (testUrl.includes("uat")) {
    var apiUrl = 'https://localhost:44364'; //TODO when the URL is decided for UAT
}
else {
    var apiUrl = 'https://localhost:44364'; //TODO when the URL is decided for PRD
}

// Register `sponsorApplications` component, along with its associated controller and template
angular.
    module('App').
    component('sponsorApplications', {
        templateUrl: '../../js/sponsor-applications/sponsor-applications.template.html',
        controller: ['$scope', '$http', function SponsorApplications($scope, $http) {
            var user_id = $("#User_Id").val();

            if (user_id != "") {

                $http.get(apiUrl + '/api/v1/Sponsors/' + user_id + '/Applications').then(function successCallback(response) {
                    $scope.sponsorApplications = response.data;
                    console.log($scope.sponsorApplications);
                }, function errorCallback() {
                    alert('Please try again later, network error, email sent to application administrator')
                });
            }

            $scope.addApp = function (arg) {
                debugger;
                console.log(arg);
                alert(arg);
            };

            $scope.remove = function (index) {
                debugger;
                $scope.sponsorApplications.splice(index, 1);
            };           
        }
        ]
    });

sponsor-applications.module.js

'use strict';

// Define the `sponsorApplicaitons` module
angular.module('sponsorApplications', []);

sponsor-applications.template.html

<style>
    /* Overwrites */

    .btn {
        width: 100%;
    }

</style>
<table class="table-bordered table-striped" style="width:100%;">
    <thead style="font-weight:bold">
        <tr>
            <td>Remove</td>
            <td>Application ID</td>
            <td>Application Name</td>

        </tr>
    </thead>
    <!-- The naming must be exact application matches the $scope.sponsorApplications
         in sponsor-applications.component.js-->
    <tr ng-repeat="app in sponsorApplications">
        <td>
            <a class="btn" ng-click="remove($index)"><i class="fa fa-times" aria-hidden="true"></i></a>
        </td>
        <td>{{ app.application_ID }}</td>
        <td>{{ app.application_Name }}</td>
    </tr>
</table>

Create.cshtml -- ASP.NET Core w/ Razor Syntax ----

@model WEB.ViewModels.AddSponsorViewModel
@using WEB.HtmlHelpers

@{
    ViewData["Title"] = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!-- Alert Display will be used as a standard on all page simply add this to your page
    https://www.trycatchfail.com/2018/01/22/easily-add-bootstrap-alerts-to-your-viewresults-with-asp-net-core/
    https://www.trycatchfail.com/2018/02/21/easy-bootstrap-alerts-for-your-api-results-with-asp-net-core/-->
@await Html.PartialAsync("~/Views/Shared/_StatusMessages.cshtml")
<h2>Sponsor Information</h2>
<form asp-action="Create" id="CreateSponsor">
    @Html.AntiForgeryToken()
    <input type="hidden" id="User_Id" name="User_Id" value="" />
    <div class="form-horizontal">
        <hr />
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="col-md-12">
            <row>
                <div class="form-group col-md-5">
                    <label asp-for="Domain_ID" class="control-label"></label>
                    <br />
                    <input asp-for="Domain_ID" class="form-control" />
                    <span asp-validation-for="Domain_ID" class="text-danger"></span>
                </div>
                <div class="col-md-2">
                    &nbsp;
                </div>
                <div class="form-group col-md-5">
                    <label asp-for="Name" class="control-label"></label>
                    <br />
                    <input asp-for="Name" class="form-control" />
                    <span asp-validation-for="Name" class="text-danger"></span>
                </div>
            </row>
        </div>
        <div class="col-md-12">
            <row>
                <div class="form-group col-md-12">
                    <label asp-for="Email" class="control-label"></label>
                    <br />
                    <input asp-for="Email" class="form-control" />
                    <span asp-validation-for="Email" class="text-danger"></span>
                </div>
            </row>
        </div>
        <div class="col-md-12" style="margin-top:20px">
            <row>
                <div class="col-md-6">
                    <strong>Delegates</strong>&nbsp;<asp:button formnovalidate="formnovalidate" id="addDelegate" style="cursor: pointer" class="btn-xs btn-primary" data-toggle="modal" data-target="#delegatesModal">Add</asp:button>
                    <sponsor-delegates></sponsor-delegates>
                </div>
                <div id="divMyAppCtrl" class="col-md-6">
                    <strong>Applications</strong>&nbsp;<asp:button formnovalidate="formnovalidate" id="addApplication" style="cursor: pointer" class="btn-xs btn-primary" data-toggle="modal" data-target="#appModal">Add</asp:button>
                    <br />
                    <sponsor-applications></sponsor-applications>
                </div>
            </row>
        </div>
        <div class="col-md-12" style="margin-top:50px;">
            <row>
            <div class="col-md-2">
                <input type="submit" value="Delete" disabled class="btn btn-default" />
            </div>
            <div class="col-md-offset-6 col-md-2" style="text-align:right">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
            <div class="col-md-2">
                <button class="btn btn-default" type="button" id="cancel" onclick="location.href='@Url.Action("Index", "Sponsors")'">Cancel</button>
            </div>
            </row>
        </div>
    </div>
</form>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

<!-- Modal to select delegates for sponsor -->
<div class="modal fade" tabindex="-1" role="dialog" id="delegatesModal">    
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <strong>Please select the Delegates</strong>
                <div id="delgates_tbl">
                    <delegates></delegates>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn-sm btn-default no-modal" data-dismiss="modal" id="closeDelegate">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Add Applications Button in Modal

<!-- Modal to select application for sponsor -->
<div class="modal fade" tabindex="-1" role="dialog" id="appModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <strong>Please select the applications</strong>
                <div id="divModalApps">
                    <applications></applications>
                </div>
            </div>
            <div class="modal-footer"> 
                <button type="button"
                        ng-click="addApp('Cheese')"
                        class="btn-sm btn-default no-modal">
                  Add Applications
                </button>
                <button type="button" class="btn-sm btn-default no-modal"
                        data-dismiss="modal" id="closeApps">
                  Close
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

----

The button HTML is present on the Create.cshtml page, along with all templates such as

<sponsor-applications>
</sponsor-applications>

It's worth noting that in the _Layouts.cshtml page, all JS files are linked, including ~/app.module.js, ~/app.config.js, 

~/js/sponsor-delegates/sponsor-delegate.module.js
, 
~/js/sponsor-delegates/sponsor-delegates.component.js

javascriptangularjsasp.net-corerazor

Answer №1

sponsor-applications.component.js

//Author: Robert B Dannelly
//Date: 4/8/2019
//File: sponsor-applications
'use strict';

var testUrl = window.location.hostname;
if (testUrl.includes("localhost")) {
    var apiUrl = 'https://localhost:44364';
}
else if (testUrl.includes("uat")) {
    var apiUrl = 'https://localhost:44364'; //TODO when the URL is decided for UAT
}
else {
    var apiUrl = 'https://localhost:44364'; //TODO when the URL is decided for PRD
}

// Register `sponsorApplications` component, along with its associated controller and template
angular.
    module('App').
    component('sponsorApplications', {
        templateUrl: '../../js/sponsor-applications/sponsor-applications.template.html',
        controller: ['$scope', '$http', function SponsorApplications($scope, $http) {
            var user_id = $("#User_Id").val();

            if (user_id !== "") {

                $http.get(apiUrl + '/api/v1/Sponsors/' + user_id + '/Applications').then(function successCallback(response) {
                    $scope.sponsorApplications = response.data;
                    console.log($scope.sponsorApplications);
                }, function errorCallback() {
                    alert('Please try again later, network error, email sent to application administrator');
                });
            }
            //TODO - Have to get rows from Modal to Page
            // Add Rows 
            

**********************BELOW is the correct SYNTAX********************            
            this.addApp = function (arg) {
                alert(arg);
                debugger;
                console.log(arg);                
            };
            
                 

            //$scope.addApp = function (arg) {
            //    debugger;
            //    console.log(arg);
            //    alert(arg);
            //};

            // Remove Rows
            $scope.remove = function (index) {
                debugger;
                $scope.sponsorApplications.splice(index, 1);
            };           
        }
        ]
    });

Create.cshtml Changes

In the template

<div id="divMyAppCtrl" class="col-md-6">
                    <strong>Applications</strong> <asp:button formnovalidate="formnovalidate" id="addApplication" style="cursor: pointer" class="btn-xs btn-primary" data-toggle="modal" data-target="#appModal">Add</asp:button>
                    <br />
                    <sponsor-applications ng-ref="sponsorApplications"></sponsor-applications>
                </div>

Add Applications Modal in the footer

<div class="modal-footer"> 
                <button type="button" ng-click="sponsorApplications.addApp('Clicked')" class="btn-sm btn-default no-modal">Add Applications</button>
                <button type="button" class="btn-sm btn-default no-modal" data-dismiss="modal" id="closeApps">Close</button>
            </div>

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

Is ng-repeat failing to bind values in the Dom?

When loading data dynamically to ng-repeat, I am encountering an issue where the data is not binding to ul. Typically, this can happen with duplicate indexes, but in my case I'm unsure of what's causing it. Any suggestions? main.html <div> ...

javascriptangularjs

The Utilization of Callback Functions in CRUD Operations

I am curious about incorporating CRUD operations as callbacks while maintaining the Separation of Concerns. For instance, I have written a function that retrieves all users: UserService.js function getUsers(callback) { User.find(function(err, users) { ...

javascriptexpresscallbackcrud

What is the best way to incorporate custom events into classes using Node.js?

Recently delving into node, I have a question about adding custom events to a class. In the code below, I attempted to create a simple farm class where the number of animals changes and triggers an event called totalChanged. let events = require('eve ...

javascriptnode.jsclasseventscustom-events

Activating controllers with 2 independent sliders

(Using the WordPress Slider Revolution plugin) I have set up two sliders next to each other - one displaying the service name and description, and the other showing images. The goal is for clicking a specific bullet on the service slider to also trigger t ...

javascriptjquerywordpressslider

Encountering difficulties launching development server for Next.js 14 using the latest version of Yarn Berry

I'm encountering an issue when trying to run the development server in nextjs 14 using yarn. It works perfectly fine with pnpm and npm, but I am facing this problem only with yarn The error message: E:/Programming/TM/test/.yarn/__virtual__/next-virtu ...

javascriptnext.jsnext.js14

Dropdown menu not populating with options in AngularJS ngOptions

It's puzzling to me why the dropdown menu is not being populated by ng-options. Despite JSON data being returned from the service and successfully logged in the controller, ng-options seems to be failing at its task. <tr class="info"> <td ...

javascriptjsonangularjs

What is the best way to record and share a video with jquery and laravel?

Is there a way to grant users access to record videos within an application and then upload them after previewing? I've been able to successfully record and download a video, but now I'm unsure of how to proceed with uploading it to the server. ...

javascriptjquerylaravel

Struggling to concentrate using jQuery?

When the search icon is clicked, I want the focus to be on the input so the user can start typing right away without having to manually click on it. Although I tried using focus(), it doesn't seem to work for this particular input. $('.header__ic ...

javascriptjquery

Can we set a restriction on the maximum number of children a particular div can contain?

I'm trying to find a way to restrict the number of children in a div. The concept is that there is a selected commands div where you can drag and drop available commands (essentially buttons) from another div called available commands. However, I wan ...

javascriptjquerycssdrag-and-drop

Is it possible to detect a specific string being typed by the user in jQuery?

Similar to the way Facebook reacts when you mention a username by typing @username, how can jQuery be used to set up an event listener for [text:1]? I aim to trigger an event when the user types in [text: into a text field. ...

javascriptjqueryjquery-events

Problems arise when using AngularJS' .run function after navigating to a different page

I have encountered an issue with ngRoute while navigating between pages in my web application. The main login page is called index.html, and the routing is controlled by the main js file. However, I face a problem when trying to use a .run block on a speci ...

javascripthtmlangularjs

Convert JSON data into an HTML table using JavaScript without displaying the final result

I need help troubleshooting my JavaScript code that is supposed to populate an HTML table with data from a JSON file. However, the table remains empty and I can't figure out why. Sample JSON Data [{"User_Name":"John Doe","score":"10","team":"1"}, { ...

javascripthtmljsonhtml-table

Executing a Restangular GET request with information included

Is there a way to make a GET request with data in Restangular? My AngularJS app uses Parse as the backend, and for logging in, it needs a GET request with data: curl -X GET \ -H "X-Parse-Application-Id: ..." \ -H "X-Parse-REST-API-Key: ..." ...

angularjsgetparse-platformrestangular

Having trouble with Javascript files failing to load while hosting a website on digital ocean?

Recently, I developed a web application using an express backend and the ejs view engine. Everything works perfectly fine when tested on my local machine. However, I encountered issues when trying to host it on a digitalocean droplet (Ubuntu 22.10 x64). Af ...

javascriptnode.jsexpressejsdigital-ocean

Invoke the ng-click function within the ng-change function

Just starting out with angularjs and I have a question. I am currently using single select and I want to retrieve the value selected and based on that value, perform an action. For example, if the value is "DELETE" then I would like to trigger the ng-clic ...

javascriptangularjs

`Passing JavaScript variables through HTML anchor tags`

I am currently attempting to pass the id to the controller using this method: {{ route("admin.service.edit", '+val[0]+' )}} However, the '+val[0]+' is being interpreted as a string in the URL http://localhost:8000/admin/servi ...

javascripthtmlajaxlaravel-5anchor

Creating image gallery with navigation arrows in JS/jQuery to loop through array of thumbnails

I am relatively new to working with arrays, and I have been exploring ways to use them in controlling the positions of thumbnails when navigating through a series of images using next or previous buttons. My goal is to make the thumbs loop seamlessly whene ...

javascriptjqueryarraysif-statementthumbnails

Even after being removed from the DOM using Ajax load, JQuery continues to execute

Currently, within my Laravel 5.2 single page application development, I am faced with the following issue. I have an add.blade.php file and an edit.blade.php file, both containing a script with the same class name and id. When I use .load to load add.blade ...

javascriptjqueryajax

The functionality for the angular ng-model-options getterSetter is not functioning as expected

I've been trying to utilize the ng-model-options getterSetter feature, but I'm having trouble getting it to execute my model function. <input id="idShowDisabled2" type="checkbox" ng-model="myObj.Trev" ng-model-options="{ getterSetter: true }" ...

angularjs

The NPM version needs to be updated as it is outdated

Struggling with a dilemma here. My Laravel project is quite dated, and I'm unable to execute npm run dev. Let's take a look at some code: php artisan laravel --version: Laravel Framework 5.8.38 node --version: v16.16.0 This is the current Node v ...

javascriptnode.jsnpmwebpacklaravel-5