Click event not triggering the doSomething() function in $scope, but works with onclick event for the same

The current controller being used is:

angular.module('app.PostView', [])

.controller('PostViewCtrl', function($scope, $http, Constants) {


    $scope.posts = [];      
    $scope.doSomething = function(){
        console.log("in doSomething");
    }

    $http.get(Constants.POST_URL)
        .then(function (response){
            console.log(response);

            var post = new PostFactory(response.data);

            $scope.posts.push(post);



        });


})

The view designed for the controller looks like this:

<div ng-repeat="post in posts" >
  <div class="home-container">
    <div id="details-container">
          <!-- using single item Array instead of single iftem to fix linkify bug -->
        <div ng-bind="post.desc"></div>
        <span class="item-note single-post-details">
          <!-- <div class="time-text">{{post.id}}</div> -->
          <div class="title" >{{post.title}}</div>
        </span>
        <a ng-click="doSomething()" href="#" >{{post.name}}</a>
    </div>
  </div>
</div>

In testing, it was discovered that changing "ng-click" to "onclick" triggers the execution of the doSomething function. However, currently it is not happening. Interestingly, the same Controller and HTML code functions properly in other views.

Answer №1

By simply clicking on the anchor, it triggers a change in routing to http://website/#, which is then picked up by the $routeProvider and ng-view loads the default view and template visible on your end.

To resolve this issue, you can either remove href="#" from your anchor link or leave it blank as href="". This should solve the problem for you.

<a ng-click="performAction()" href="">{{content.title}}</a>

Answer №2

Eliminate href entirely

<a ng-click="doSomething()" 
   style='cursor:pointer' >{{post.name}}</a>

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

Creating a custom type for accepted arguments in a Typescript method

Below is the structure of a method I have: const a = function (...args: any[]) { console.log(args); } In this function, the type of args is any[]. I am looking to create a specific type for the array of arguments accepted by this method in Typescript. ...

Exploring textboxes with jQuery loops

Is there a way to clear all these textboxes by iterating through them using Jquery? <div class="col-md-4" id="RegexInsert"> <h4>New Regex Pattern</h4> <form role="form"> <div class="form-group"> &l ...

Automatically generate nested object properties in VueJS for streamlining code structure

Understanding the Issue I have created a custom system to monitor specific "store" properties from a JSON in a NoSQL database. The structure is fairly straightforward, with nested objects that are necessary for various reasons. The data format resembles ...

Unable to showcase array JSON values on HTML using ng-model

Utilizing ngTagInput for autocomplete textbox and successfully receiving suggestions. To display the values of data-ng-model (named "list") I am using: {{list}} and it is showing correctly. However, when selecting "list1", the display appears as: [{"lis ...

How can I rename attribute values in a dropdown menu and ensure they work properly?

I'm facing an issue with my code. How can I store the option values in a database when they have numbering like value="1" or value="2"? Can I change it to something like value="1000" and have the other select box change to value="250" when selected? ...

Parsing Json data efficiently by utilizing nested loops

I have 2 different collections of JSON data, but I'm unsure of how to utilize JavaScript to parse the information. Data from API1 is stored in a variable named response1: [{"placeid":1,"place_name":"arora-square","city":"miami","state":"florida","c ...

What is the best way to recycle a variable in TypeScript?

I am trying to utilize my variable children for various scenarios: var children = []; if (folderPath == '/') { var children = rootFolder; } else { var children = folder.childs; } However, I keep receiving the following error message ...

create visual content on a webpage

I am looking to showcase this image on a webpage with rectangles acting as a drop-down menu. Any creative suggestions on achieving this without resorting to using background images with CSS? ...

Effective methods for eliminating timezone in JavaScript

I need to display the time and format {{transaction.submitTime | date:'yyyy-MM-dd HH:mm:ss Z'}} Currently, it displays 2015-04-23 02:18:43 +0700 However, I would like to show the time without +0700, where the hour will be incremented by 7. Is ...

Locate identical values in Vuejs

When working with an array of objects, I need to check if a newly inserted object is a duplicate or not. this.duplicate = false; for(let item of this.items){ if(item.id && this.item.name === item.name) { t ...

Utilize Polymer 3 component to import object values

In one of my polymer 3 components, I have declared an object property as follows: static get properties(): myInferface { return { myObject: { type: Object, notify: true, value: { showMe: false, text: ...

What is the best way to postpone one of the 3 ajax requests?

Can anyone assist me with handling AJAX forms? I am trying to ensure that the smallest one is executed after the others, but I also want to introduce a delay in the process. I attempted to utilize setTimeout(), however, it does not seem to be functioning ...

The functionality of Angular binding appears to be experiencing issues when used in conjunction with ngIn

On my timeline, I have posts displayed using a $firebaseArray that updates properly when there are changes. However, I noticed that when I try to bind other data, it only works when ngInfiniteScroll is fetching more data from Firebase, triggered by scrolli ...

Place the elements for the children prior to the text within

I'm currently using jQuery/JavaScript to insert various elements into an existing <div>. The code is functioning properly, but I would like the text to be added after the initial image. Is there a straightforward way in jQuery to insert the chi ...

NodeJS package 'jquery' npm not functioning properly (issue with $.on())

I've successfully installed and loaded jquery by using $ = require('jquery'); However, when I attempt to utilize it: app.get('/', function (req, res) { res.render('index'); $.on('ready', function () { ...

Adjust the color of the stacked bar graph

I am looking to customize the color of individual bars in a stacked bar chart based on two different categories: APP Used and APP not used. Specifically, I want APP Used bars to be green and APP not used bars to be red, instead of the default black and gre ...

What is the best way to refresh a navigation bar after making an API request, such as when using Google Sign-In?

Struggling to grasp the hook concept in this particular scenario: The flow goes like this - the user logs in with Google, which updates the session state. Consequently, the visitorType state transitions from 'viewer' to 'buyside'... A ...

Having trouble making the menu stay at the top of the page in IE7

Check out the demo here: http://jsfiddle.net/auMd5/ I'm looking to have the blue menu bar stay fixed to the top of the page as you scroll past it, and then return to its original position when scrolling back up. This functionality works in all brows ...

Experiencing 429 Too Many Requests error on Angular 7 while attempting to perform multiple file uploads

Whenever I attempt to upload a large number of files simultaneously, I encounter an issue. The API interface only allows for the submission of one file at a time, requiring me to call the service for each individual file. Currently, my code looks like thi ...

Guide on how to transform form data into an object containing nested properties

Considering the inputs provided below: <input name="person[1]['first']" /> <input name="person[2]['first']" /> <input name="person[3]['first']" /> The objective is to convert this into an object structure a ...