Trigger an Angular controller within Foundation's reveal modal

Trying to implement a form using foundation's reveal modal, I want to incorporate an angular controller within the form for ajax form submission instead of the default post/refresh behavior.

This is my primary view:

<html lang="es" ng-app="crm">
<body>
<script>
    var crmapp =  angular.module('crm', ['ng.django.forms',"ui.select"]);

</script>
<a data-reveal-id="idmodal" class="fi-burst" data-reveal-ajax="true" href="/operador/clientes/saldos/anadir/13">Add Payment</a>

<div id="idmodal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="false">
</div>
</body>

And here is my form:

<div class="row" ng-controller="dummy">
    <h2>Add Payment</h2>
    <ng-form>
        <label>Payment Date:</label>
        <label>Amount:</label>
        <div class="row">
            <div class="columns small-offset-5 small-7">
                <button class="buttons success round" ng-click="alert(5)">Add</button>
            </div>
        </div>
    </ng-form>

</div>

<script>
crmapp.controller('dummy', function($scope) { $scope.greeting = 'Hello!';console.log("bye"); });
</script>
<a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

While any "regular" JavaScript code in the form functions correctly, the angular controller does not seem to be working. Any suggestions on how to resolve this?

Answer №1

Learn how to utilize ng-click with a controller:

Check out this JSFiddle example

HTML:

<div ng-app="myApp">
    <div class="row" ng-controller="dummy">
         <h2>Add Payment</h2>
        <ng-form>
            <label>Payment Date:</label>
            <label>Amount:</label>
            <div class="row">
                <div class="columns small-offset-5 small-7">
                    <button class="buttons success round" ng-click="greeting()">Add</button>
                </div>
            </div>
        </ng-form>
    </div>
<a class="close-reveal-modal" aria-label="Close">&#215;</a>

</div>

JavaScript:

angular.module('myApp', [])
    .controller('dummy', ['$scope', function ($scope) {
        $scope.greeting = function () {
            console.log("bye");
        };
}]);

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

Create a token for

Visit this link for more information on listing functions in Azure web apps Is there a way to dynamically generate the green-highlighted token using JavaScript or an API? While I'm aware that the token can be generated using Azure CLI by running az a ...

Tips for managing content and tables that exceed their container's boundaries

On my webpage, I have a slide-out sidebar that shifts the other contents and causes overflow with a scrollbar. I want the content to remain inside the window and adjust according to the available space. Image of Slide-out Sidebar As seen in the image, t ...

What is the best way to trigger a useReducer dispatch function from a different file that is not a React component, without relying on Redux?

In my project, I have a function component that shows a game board named "EnemyBoardComponent.tsx" const enemyBoardReducer = (state:number[][], action:Action)=>{ switch(action.type){ case "update": { return EnemyBoard.getGrid(); ...

What is the answer to this issue where the entity name is required to directly come after the "&" in the entity reference?

Whenever I insert the code into my Blogger platform, an error pops up stating: The entity name must directly follow the '&' in the entity reference Here is the code: <script> if (typeof bc_blocks == "undefined" && wind ...

Cross-Site Scripting: Building a JavaScript object with the help of PHP's json_encode

Is this code 100% secure against XSS attacks? If not, could you provide an example of a malicious string that could make it vulnerable? <html> <body> <script> <?php $bad = "malicious string. Please provide exampl ...

Tips for utilizing ng-checked and ng-disabled in conjunction with ng-repeat

I encountered a challenge with ng-repeat while incorporating ng-checked and ng-disable alongside it. <div ng-repeat="module in modulelist"> <input id="switch{{$index}}" ng-init="setState($index);" type="checkbox" ng-checked="switch.checked" ng-di ...

Autofill with JavaScript - Dynamic Form Population

Looking to create a form-based HTML page. The objective is to have the second input box automatically populate based on the user's input in the first input box. I've gone through various guides and tried to implement this script, but it doesn&ap ...

Bizarre symbols observed while extracting data from HTML tables produced by Javascript

I am in the process of extracting data from Specifically, my focus is on the "tournament-page-data-results" div within the source code. Upon inspecting the HTML source code, the data does show up, but it appears with a mix of real information and random c ...

Retrieving particular excerpts from a block of text that includes the keyword "javascript."

I have a chunk of string containing HTML source code. Currently, I am trying to read specific tags that I need using JavaScript. Since I am new to programming, I'm unsure how to proceed. Can anyone assist me with this? The issue lies in the following ...

Is it possible to exclude certain static files from being served in express.static?

const express = require('express'); const app = express(); app.use('/app', express.static(path.resolve(__dirname, './app'), { maxage: '600s' })) app.listen(9292, function(err){ if (err) console.log(err); ...

Rule: attribute should indicate a specific function

I am currently trying to implement the functionality from https://github.com/rpocklin/angular-scroll-animate in my project, but I keep encountering an error in my console: Error: Directive: angular-scroll-animate 'when-visible' attribute must ...

Insert a concealed value into a fresh form field following an AJAX call

Within my file named a.html, I have the following code: <input type="button" class="add" /> <div id="middle"></div> Meanwhile, in file b.html, the content is as follows: <form> <input type="submit" /> </form& ...

Is it possible to relocate a function that relies on the success callback of Ajax outside of the callback?

According to JSHint.com: Avoid placing function declarations inside blocks. Opt for a function expression or move the statement to the outer function's top. JSHint advises against keeping this function within the success callback. function matchC ...

Refreshing a section of a webpage using AJAX and PHP

After creating a RESTful API in PHP, I can easily register information by accessing the address . This registration process involves sending a POST request. Below is an overview of my method: File: api.php <?php /* File: api.php */ private function ...

Guide to implementing onhashchange with dynamic elements

Hey there! I've encountered a problem with two select boxes on my webpage, each in different anchors (one on the page, the other in an iframe). What I'm trying to achieve is for the code to recognize which anchor it's in and then pass the se ...

Insert HTML content into an iframe with a callback function

We are receiving information from the backend server and need to transfer it to an iframe. In order to accurately set the height of the iframe to match the content, we must wait for the content to be loaded into the iframe. However, this process may not ha ...

Basic color scheme

I'm attempting to change the background color behind a partially transparent .png div. The CSS class that modifies the div is ".alert". Manually editing the .alert class background color works perfectly, and now I want to automate this on a 1-second c ...

Working with PHP sessions and AJAX requests triggered by injected JavaScript code

Trying to figure out what is missing in my code. I have a simple logging.php file on the server. Passing parameters like user/password creates a new session. Using loggout will destroy the session. And passing report displays a list of current session var ...

JavaScript - Modify the proposed content prior to inserting it into the input field

In my current project, I have implemented a feature using jQuery UI - v1.11.4, where an HTML textbox utilizes a JavaScript autocomplete functionality. The suggested string for the textbox is created by concatenating several columns (patient_no, patient_nam ...

Ajax search implementation presents challenges in Laravel development

I have been working on my own custom PHP application. I'm trying to add a search feature using AJAX, but my code doesn't seem to be functioning correctly. index.php <?php if (isset($_POST['search'])) { // Perform search fu ...