Is it possible to access a component's function from outside an ng-repeat in Angular 1.5?

Recently delved into learning Angular 1.5 components and testing out some fresh concepts, however, I'm struggling to wrap my head around this particular issue:

Here's the code snippet from my Main:

angular.module('myapp',[])

.controller('appController',['$scope', '$interval',function($scope, $interval) {

    
    $scope.action = function(remote){
      // How do I execute obj.action
    };
    
    $scope.objectList = [{name: 1},{name:2},{name:3},{name:4},{name:5}];

    $interval(runList, 1000);
    
    function runList() {
      
      // How can I call obj.action on each object in objectList? obj.action?
      
      obj.action();
      
    }
}]);


(function(angular) {
'use strict';


angular.module('myapp').component('obj', {
    template: '<div class="box">{{obj.messsage}}</div>',
    controllerAs: 'obj',
    controller: function() {
    
    var obj = this;
    
    obj.action = function() {
      obj.message = "Updated, so it was a success";
    }
    
    
    },
    bindings: {
        ngModel: '=',
        action: '&'
    });
})(window.angular);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-controller="appController">
    <h1>Hello Plunker!</h1>
    
    <obj ng-model="obj" ng-repeat="obj in objectList"></obj>
   
</body>

Plunker

I am struggling to understand how to trigger the component's action (obj.action()) from the controller within the runList function.

My apologies if the formatting is not perfect, as I am still new to all of this.

p.s. I checked a similar question, but it didn't involve any html and wasn't specifically related to ng-repeat

If further clarification is needed: How can a component execute different components' functions within an ng-repeated list when triggered by the $interval?

Answer №1

Include $interval in the list of dependencies for your controller

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

Fetching information from server proves to be sluggish within AngularJS application

In the process of developing a web application, I am faced with the task of sending numerous $http requests to the server. My front-end is built using AngularJS while the back-end utilizes ExpressJS. The $http requests are currently being made as shown in ...

When running `grunt serve: dist`, an error is thrown stating: "Unknown provider: utilProvider <- util <- NavbarController"

I am facing a problem with my angularJS website that is built using the yeoman angular-fullstack generator. When I run grunt serve, everything works perfectly fine. However, when I try to run grunt serve:dist, I encounter this error: grunt serve: dist -&g ...

Trouble arises when accessing GET form in php/Ajax

I am in the process of creating a dynamic website. At the top, I have an input form that, when submitted, should display the output from an asynchronous request to a PHP page using echo to show what was submitted. Unfortunately, it's not functioning ...

Creating a multi-step progress bar in Yii2 that showcases completed steps using jQuery

Is there a way to automatically transition from one state to another once the order status changes in Yii2? var i = 1; $('.progress .circle').removeClass().addClass('circle'); $('.progress .bar').removeClass().addClass(&a ...

Automatically refresh the D3 Sunburst visualization when the source json is modified (items added or removed)

I'm a beginner in D3 and I'm attempting to update the chart dynamically if the source JSON is modified. However, I'm facing difficulties in achieving this. Feel free to check out this plunkr Js: var width = 500, height = 500, radi ...

Update a variety of CSS properties simultaneously

Is it possible to change multiple CSS attributes of an element with just one line of code? Currently, if I want to alter various CSS attributes of an element, I have to write separate lines of code for each attribute. For instance: $("div#start").cli ...

"Utilizing Express's Jade middleware to efficiently handle and manage

Can you create a custom exception handler for errors in jade templates? For example: // server.js app = express(); app.set('view engine', jade); app.locals.js = function () { throw new Error('hello'); } // views/index.jade html != ...

Switching the background image when hovering over a list element

Looking at the screenshot, it's clear that there is an unordered list with a background image set on the div. What I am trying to achieve is to have the background image change whenever I hover over a list item. Each list item should trigger a differe ...

Retrieve data from Instagram API using AngularJS

When authenticating a user in an app using the Instagram API, the process involves redirecting the user to a specific URL: https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=code. After the user ...

Tips for redirecting to a 404 page when encountering invalid data in getStaticProps

For my Next.js application, I need to retrieve all articles written by a specific author. The author's ID is obtained from the request parameters. I have already pre-generated some authors using getStaticPaths. Within the getStaticPaths function, I h ...

ReactJS Modal popping up repeatedly while inside a loop

Hey there, I've been experimenting with ReactJS and came across this amazing Modal Component for opening videos in a modal. However, I encountered an issue when placing the Modal inside a loop with multiple links - it opens multiple times correspondin ...

Can you suggest a solution for fixing this error in Angular Js?

I recently started learning Angular JS and encountered some issues while trying to implement routing. Click here for the error message <!DOCTYPE html> Main <a href="#!london">City 1</a> <a href="#!paris">City 2& ...

Tips for dynamically changing the class of a form field in jQuery when it is empty

I am currently working on a form that looks like this; <form id="myform" name="myform"> <input type="text" class="required" value="" name="qwer" /><br /> <input type="text" value="" name="asdf" /><br /> <input type=" ...

Geoserver does not have the 'Access-Control-Allow-Origin' header

map.on('singleclick', function (evt) { document.getElementById('info').innerHTML = "Looks like you need to redo this :) !!!"; var view = map.getView(); var viewResolution = view.getResolution(); var source = hcm.getSource(); var url = s ...

Vue's reactivity in Vue 3 is exhibiting strange behavior with boolean data

Currently, I am attempting to modify a boolean variable. Upon the initial page load, everything works as expected. However, upon reloading the page, the variable gets updated locally within the method but not in the global data section. As a result, an err ...

Tips for effectively modeling data with AngularJS and Firebase: Deciding when to utilize a controller

While creating a project to learn AngularJS and Firebase, I decided to build a replica of ESPN's Streak for the Cash. My motivation behind this was to experience real-time data handling and expand my knowledge. I felt that starting with this project w ...

obtain direct access to the $scope variable when using ng-if

Is there a more effective way to access scope created by ng-if in my directive without using $parent.params.text? <span ng-if="params" uib-tooltip="{{params.text}}"></span> .directive('myDirective', functions(){ return { te ...

Tips for toggling the visibility of an element when a button is clicked in React

In my todo list, I need to display the details of each item when clicked on a button. There are two buttons available: "View Details" and "Hide Details". Below is the code snippet: class Todos extends React.Component{ construc ...

Having trouble retrieving data from the database when passing input to a mongoose query using an href tag in Node.js

Welcome to My Schema const AutomationSchema=new mongoose.Schema( {EventName:String, EventDate:String, EventLocation:String, EventDetails:String } ) The Events Model const EventsModel=new mongoose.model("Events",AutomationSchema ...

Utilizing jQuery boilerplate to execute functions

I am currently utilizing jQuery Boilerplate from However, I have encountered an issue where I am unable to call the "openOverlay" function within the "clickEvents" function. Oddly enough, I am able to successfully call "openOverlay" within the "init" fun ...