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

The function is not triggered when the select tag is changed

I'm currently working on implementing a drop-down menu using the <select> element in HTML. Here is the code snippet I have so far: <select id="Parameter1" onchange="function1()"> <option value = "0105" name = "Frequency">Frequency ...

javascriptangularjsdrop-down-menuangularjs-scopeonchange

Send the user back to the homepage without the need to refresh the page

When the user clicks "Okay" in my window.prompt, the code below opens a new tab. Is there a way to direct the user to the home page without opening a new tab? if (window.confirm("Do you really want to leave?")) { window.open("./Tutoria ...

javascripthtmlreactjswindowalert

What is the proper way to ensure a pull right display appears correctly?

This is the code I am currently using .tag-container.bottom-border.col-middle h1.text-center {{ tag.name }} button.btn.btn-follow.pull-right(ng-hide="hasFollowed" ng-click="tagArticles.followTag()") Follow I am trying to align the tag name in th ...

cssangularjstwitter-bootstrappug

Assign an identifier to the HTML helper Html.EditorFor

When using a textbox created with the HTML helper "@Html.EditorFor", there may be a need to perform some action with JavaScript on its change event. In order to do this, an ID needs to be set for the textbox. For example, if you need to set a string value ...

javascriptjqueryhtml

Autofill Text Input with React Material-UI

For my current project, I am utilizing Material UI and React. Each TextField in the project has a button next to it, and when the button is clicked, I want it to retrieve the value of its corresponding TextField and set that value as the input for another ...

javascriptarraysreactjsmaterial-uitextfield

What is the best way to execute tests in different environments with Protractor?

Is it possible to execute specifications in various environments? Maybe by adjusting the protractor-config file? Could we do something along the lines of specs: ['../tests/*.js', server1], ['../more_tests/*.js', server2] within the ...

javascriptnode.jsangularjsmocha.jsprotractor

Having trouble retrieving features from a QR code generated with Angularx-qrcode?

I utilized angularx-qrcode in order to create a QR code that displays data from qrInfo. However, I'm encountering the following error: ERROR TypeError: Cannot read properties of undefined (reading 'qrcElement') The code within qr-code-gener ...

javascriptangularqr-code

Issues with babel plugin-proposal-decorators failing to meet expectations

I recently included these two devDependencies in my package.json: "@babel/plugin-proposal-class-properties": "^7.1.0", "@babel/plugin-proposal-decorators": "^7.1.6", In the configuration file .babelrc, I have listed them as plugins: { "presets": ["m ...

javascriptreactjsreact-nativebabeljs

Tips for maximizing image efficiency using Next.js and Amazon S3

Currently, I'm utilizing nextjs, react-hook-form, and aws to develop a form incorporating images. Here is my existing setup: form.tsx: <Controller name={'photoDump'} control={control} //{...register('photoDump')} render ...

javascriptreactjsamazon-s3next.js

How to clean a string from PHP code using jQuery

Looking for a solution to extract PHP code from a string. The string I have contains PHP code that needs to be removed. text = '<?php // This is a test sample ?> This is a description'; text.replace(/\<\?.*\?\?\ ...

javascriptjqueryregex

Returning data to be displayed in Jade templates, leveraging Express and Node.js

Yesterday, I had a question. Instead of using next() and passing an Error object, I decided to figure out what it was doing and replicate it. So now, when someone logs in and it fails, I handle it like this: res.render("pages/home", { ...

javascriptnode.jsexpresspug

How can I ensure that the images span the entire width of the page in ResponsiveSlides?

I am trying to make my images occupy the entire width of the page just like in this example: However, I have not been able to find a property for this. I'm new to using Jquery but I have a good understanding of Javascript Can someone please help me ...

javascriptjqueryhtmlcssresponsive-slides

Using JavaScript, delete a class from an element

I am looking for a way to remove a specific class attribute from all elements on a webpage. The challenge is that I only have the class name as a reference, and cannot use any other identifiers like id or another class. Additionally, I cannot rely on JavaS ...

javascript

Navigational bar with React and Next.js. Issue: Hydration unsuccessful due to inconsistencies between the initial UI and the server-rendered content

I am working on a project with Next.js and React. I've created a navbar component but I keep encountering the following error message multiple times: Error: Hydration failed because the initial UI does not match what was rendered on the server. Warni ...

javascriptreactjsnext.jstailwind-css

What is the process for including an SVG file in my JavaScript .textContent?

I've been struggling to add an exclamation SVG to this section, but for some reason I can't make it work. I've searched on Google for a solution, but haven't found one yet. The SVG file is already downloaded and stored in my project fo ...

javascripthtmlcsswebweb-deployment

What is the best way to divide a string into chunks of no more than 2000 characters each at the end of

Here is a brief excerpt from a string variable labeled results ... 2017-09-18 920.0100 922.0800 910.5999 915.0000 1294800 2017-09-15 924.6599 926.4899 916.3599 920.2899 2505400 2017-09-14 931.2500 932.7700 924.0000 925.1099 1397600 2017-09- ...

javascriptarraysregexmatch

What could be causing the issue preventing me from updating my SQL database through AJAX?

$(document).ready(function(){ $('.button').click(function(){ var clickBtnValue = $(this).val(); var ajaxurl = 'functions/delivered.php', data = {'action': clickBtnValue}; $.post(ajaxurl, da ...

javascriptphpjqueryajax

Add an existing file or directory to your Intellij IDEA project

Recently, I've been experimenting with Intellij Idea 15.0.3 to develop a MEAN stack application. To kick things off, I followed the steps of File -> New -> Project -> Empty Project in order to create a blank project. Then, within Intellij Id ...

angularjsnode.jsintellij-ideanpm

A comprehensive guide on creating translation files using grunt angular-translate from original JSON files containing translations

I have a unique angular application that requires support for multiple languages. To achieve this, I have implemented the angular translate task in the following manner. My goal is to create separate language files which can be loaded later using the useSt ...

javascriptangularjsjsongruntjsangular-translate

Query Using AngularJS for Multiple Selection

I am facing an issue with my Angular Search app. When I try to add multiple selection boxes, they do not work cumulatively. For example, if I select "Cervical" in the first box and then "Muscle" in the second box, it unselects "Cervical". What should I be ...

jsonangularjs