Using the same function in two different locations will only work for one instance

Question

Using the same function in two different locations will only work for one instance

I have an AngularJS application where I am using a function called foo(bar) that takes bar as a parameter. The data for bar is retrieved from a web API, and I loop through this data using ng-repeat which works perfectly fine.

<li class="list-group-item" ng-repeat = "tag in subreddit.tags">
        <a href="javascript:void(0);" ng-click="subreddit.getData(tag)" target="_blank">{{tag.data.url}}</a>

      </li>

The getData function works as expected with the ng-repeat directive. However, I encountered an issue when defining another instance of getData in the same app:

    <button class="btn btn-success btn-block" ng-click="subreddit.getData(tag);">Load Feeds...</button>

This time, getData does not work because the parameter 'tag' is undefined, unlike in the case of ng-repeat where it was provided by the data.

To further illustrate my problem, I have created a demo to showcase the issue.

Steps to reproduce:

1. Click on the Reddit links to see the data being populated correctly in the console

2. Click on the red button "Load Feeds" which calls the same function but doesn't work

If anyone can provide insight into how to resolve this issue or point out what mistake I might be making, I would greatly appreciate it.

Demo of the Issue:

http://jsbin.com/xexawumojo/edit?html,js,output

javascript angularjs angular-promise

Answer 1

Answer №1

Instead of defining a new instance, you continue to utilize the existing controller. However, since you have already written without a valid data object, the tag is now unknown because you are no longer within the repeat loop.

To remedy this issue, consider implementing a mouse click handler that can save the selected tag in the controller and then utilize this saved tag for subsequent actions.

Answer 2

Instead of defining a new instance, you continue to utilize the existing controller. However, since you have already written without a valid data object, the tag is now unknown because you are no longer within the repeat loop.

To remedy this issue, consider implementing a mouse click handler that can save the selected tag in the controller and then utilize this saved tag for subsequent actions.

Answer 3

Answer №2

I'm a bit confused by the question, but it seems like there might be a misunderstanding of the concept. Here is a program that may provide some help:

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="first" ng-controller="SubRedditController as subreddit">

   <ul class="list-group">
    <!-- If you declare the tag variable here, its scope will only be within the following li element -->
      <li class="list-group-item" ng-repeat = "tag in subreddit.tags">
        <a href="javascript:void(0);" ng-click="subreddit.getTagAssociatedData(tag)" target="_blank">{{tag.data.url}}</a>

      </li>
    
     <ul>
        <li class="list-group-item" ng-if="subreddit.full_description">
        {{subreddit.full_description.description}}
      </li>
     </ul>
  </div>

</body>
</html>

It appears that the value being passed is undefined, so the function may execute like this:

vm.getTagAssociatedData = function(data) { 
// When data is undefined         
var full_description = data.data; // full_description = undefiend
vm.full_description = full_description; // vm.full_description = undefined  
          console.log(data); // no output
        }

Answer 4

I'm a bit confused by the question, but it seems like there might be a misunderstanding of the concept. Here is a program that may provide some help:

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="first" ng-controller="SubRedditController as subreddit">

   <ul class="list-group">
    <!-- If you declare the tag variable here, its scope will only be within the following li element -->
      <li class="list-group-item" ng-repeat = "tag in subreddit.tags">
        <a href="javascript:void(0);" ng-click="subreddit.getTagAssociatedData(tag)" target="_blank">{{tag.data.url}}</a>

      </li>
    
     <ul>
        <li class="list-group-item" ng-if="subreddit.full_description">
        {{subreddit.full_description.description}}
      </li>
     </ul>
  </div>

</body>
</html>

It appears that the value being passed is undefined, so the function may execute like this:

vm.getTagAssociatedData = function(data) { 
// When data is undefined         
var full_description = data.data; // full_description = undefiend
vm.full_description = full_description; // vm.full_description = undefined  
          console.log(data); // no output
        }

Using the same function in two different locations will only work for one instance

Answer №1

Answer №2

Similar questions

Safari 15.6.1 does not support background video playback in Next.js

Present the array elements in a format that allows the user to easily choose an option and explore the content

Guide on integrating react-tether with react-dom createPortal for custom styling of tethered components based on their target components

Add HTML content to an element within a directive and create a custom function to manipulate it locally

Stopping React from re-rendering a component when only a specific part of the state changes

Express & React: Be cautious of client checksum and style while server-side rendering

Error: An unidentified SyntaxError occurred with an unexpected token < within an anonymous function displayed on the console

Connect to a node.js server from a different network

The reason why React.js does not automatically bind its functions to the "this" object

Complete the dynamic form submission in a non-blocking manner

Passing variables with AngularJS and Typescript using a service

When using AngularJS with DateRangePicker, I am encountering an issue where my ng-model does not capture the input text value when I select a date

Auto-complete feature not populating the input field in Google Chrome

Uploading an image using ajax with multer

problem decoding json data from external server

Retrieving PHP data, utilizing the split method to break apart the commas within the string, and then displaying the information within a div using AJAX for a continuous refresh cycle every 3 seconds

Tips on storing form data in AngularJS with the Fat Free framework

How can 'this' be converted from D3 JavaScript to TypeScript?

Is it possible that when a user is redirected to a different URL, Chrome terminates any pending Ajax requests?

I'm encountering an issue with my React 18 application using TypeScript: the module './App' cannot be found