Enhancing AngularJs code effectiveness through the use of MVC framework

I'm completely new to AngularJs and still trying to grasp the concepts. I have a few questions that I hope someone can help me with:

  1. Is it possible to trigger code in the controller only when a button is clicked, rather than having it load with the view?
  2. Or does the controller always load with the view, making it impossible to isolate certain functions to onclick events?
  3. What is the best way for me to create a function that will only execute when a button is clicked, and not every time the page loads? (In an AngularJs manner)

This is the HTML section:

<ion-view view-title="Account Fixer">
      <ion-content class="padding">
        <div class="list">
            <label class="item item-input item-stacked-label">
                <span class="input-label">IrId</span>
                <input type="text" placeholder="irid" value="{{irid}}" disabled>
            </label>
            <label class="item item-input item-stacked-label">
                <span class="input-label">Email</span>
                <input type="text" placeholder="Enter New Email" value="{{email}}">
            </label>
            <button class="item button button-block button-positive" ng-click="postForm()">Fix Issue</button>
        </div>
      </ion-content>
    </ion-view>

And this is my controller:

.controller('TestCtrl',function(Test,$scope, $http, $stateParams){

$scope.email = Test.get('AB12345').email;
$scope.irid = Test.get('AB12345').irid;

//I want this to be triggered only on onclick
    $scope.postForm = function(dataForm){

    var encodedString = 'action=' + 
            encodeURIComponent("QA_fixEmail") +
            '&irid=' +
            encodeURIComponent(Acct.acctData().irid) + 
            '&email=' +
            encodeURIComponent(dataForm.email) + 
            '&password=' +
            encodeURIComponent("abcd1234");
    $http({
        method: 'POST',
        url: 'someservice',
        data: encodedString,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    })
    .success(function(data,status){
        console.log(status);
    })
    .error(function(data, status){
        console.log(status);
    })
}
})

Answer №1

Q: Can you trigger a function... in onclick events only?

A: Absolutely! Simply utilize ngClick

Check out these examples:

AngularJS Events

Keep in mind that one link uses ng-click, while the other link uses ngClick. They are interchangeable:

AngularJS, ng-click vs ng:click vs ngClick

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

Retrieving specific value from a Parent Controller in AngularJS using UI Router

I have a request to display the value stored in $scope.resAVal on my index.html page. This value is accessible within the RootCtrl. index.html <!DOCTYPE html> <html ng-app="plunker"> <head> <!-- any required JavaScript librarie ...

Exploring the principles of object-oriented design within the context of Node

I am facing challenges with the asynchronous flow of Node.js. Let's assume we have the following class: function myClass() { var property = 'something'; var hasConnected = false; this.connect = function(params) { // Logic to conn ...

What is the best way to ensure a jQuery UI slider recognizes when the mouse is released after being clicked?

I have integrated the jQuery slider into my application and am facing an issue with triggering an event to update the database upon releasing the slider. Currently, I am using the following code snippet: $('.ui-slider-handle').mouseup(function () ...

Can you provide instructions on how to display data in two lines within a mat-select field?

Is it possible to show selected options in mat-select with long strings in two lines within the same dropdown? Currently, the string appears incomplete. You can see an example of this issue here: incomplete string example <mat-form-field class="f ...

What is the best method for centering text input within an Angular Material toolbar?

Can anyone help me with aligning input elements with buttons on an Angular Material toolbar? Check out the code pen: http://codepen.io/curtwagner1984/pen/amgdXj Here is the HTML code: <md-toolbar class="md-hue-1" layout-align="start center" style="mi ...

Tips on selecting the active color ID from a list of available color IDs

Currently, I am trying to retrieve the color ID of the active color selection. For example, if I have three colors - yellow, blue, and red - with yellow being the default color. In this scenario, I can obtain the color ID of yellow using a hidden input typ ...

What are the steps for aligning GeoJSON data with terrain within Cesium Sandcastle?

I am currently using terrain view in Cesium Sandcastle and have loaded roads data in GeoJSON format as lines. I would like to clamp them on the terrain, similar to this example (select "Sample line positions and draw with depth test disabled" from drop-dow ...

"The changes made to the list are not being accurately displayed by Angular's ng

I am working on a directive that injects dynamic templates during ng-repeat. While I can successfully add items to the list, they do not appear in the view for some reason. It seems like I am missing a crucial piece to make it work correctly. You can find ...

The scrolling feature within individual div elements seems to be malfunctioning in Ionic 2

In my current project using Ionic 2, I am faced with the task of designing a screen that contains two distinct grid views. The first grid view needs to occupy 40% of the height, allowing for scrolling within that specified area. On the other hand, the se ...

Styling and Script Files on a JQuery Mobile Website

Is it necessary to include CSS and JS files in every HTML page for a mobile site developed with JQueryMobile? <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jqu ...

"Interactive demonstration" image toggle through file upload

I have a project to create a "demo" website for a client who wants to showcase the template to their clients. A key feature they are interested in is allowing users to upload their logo (in jpg or png format) and see it replace the default logo image insta ...

Identifying patterns within a string using JavaScript and TypeScript

Given a user-input pattern, for example [h][a-z][gho], and a string "gkfhxhk", I am attempting to determine if the string contains the specified pattern. The pattern dictates that the first character must be 'h', followed by any letter from a-z, ...

How about utilizing node.js as a peer for WebRTC?

Are there any available modules for utilizing node.js as a peer in WebRTC? I am interested in using WebRTC in a client/server manner rather than P2P for its ability to send packets unreliably (i.e. avoiding the delay caused by TCP's guarantee of packe ...

Having issues with displaying options in Select2 within a Vue Component?

I have successfully created a Vue component that generates options for a select dropdown as shown below: <select ref="subdomain_id" name="subdomain_id" id="newEvidenceSubdomain" class="form-control" :class=&qu ...

AngularJS in action for a new Widget Framework

I am working on a project that requires creating a page similar to iGoogle. This page will consist of various drag-and-drop widgets, with each widget representing a distinct application. Does anyone have any advice or recommended links for this type of pr ...

JQuery HTML form validation continues to send emails even when there are blank entries

I've set up an HTML form with three required fields, and I'm trying to prevent the form from submitting an AJAX call if those fields are left empty. $("#contact").submit(function(e){ e.preventDefault(); var ajaxurl = '<?php echo ...

Nextjs: issue with updating state within an interval is not functioning

This is my current situation: const [time, setTime] = useState(10) And this is the function I'm using: const runTimer = () => { useEffect(() => { const interval = setInterval(() => { console.log(time) if ( ...

Employing getters in the toObject() method

As I delve into the code of a Node.js Express application for learning purposes, I came across the following line that sparked my curiosity regarding the inclusion of getters and virtuals. var pgmsDbObj = chnnlList[chnnlIndex] var pgmsObj = pgmsDbObj.to ...

How can I send a jQuery ajax request with multiple custom headers?

I am facing an issue with my basic ajax request as I am trying to include a custom header using the following code: _auth=1,[my_apikey], Interestingly, when I make the same request using Postman, I receive a valid JSON response. However, when I attempt t ...

A guide on adding a hyperlink to a table in Node.js using officegen

Currently, I am utilizing a widely-used Node.js library for generating MS Office Word documents. In the officegen module, the code below is used to create a table. When a raw string is provided to the 'val' property inside the table, it generate ...