Megajin Megajin - 1 year ago 57
AngularJS Question

Fire function when input is generated with an id

I have a normal ng-repeat with its model. Everything is working fine except for my inputs... I need to run a JavaScript function the moment the input gets its data.

<div class="form-group">
<input type="text" id="game-time-passed-{{$index}}" class="form-control"
readonly="true" value="{{games.gameStartTime}}">

I just have no access to the input the moment it is generated. I know that I can't use onload on inputs... I could go for it when everything is done, but that doesn't feel right. I need to alter the data the moment it enters the input box and register a kind of a timer on that input box with its value.

I also could place a script tag under my input and start a self invoked function, but I want to keep things clean. Preferably a angular attribute oder something else like:

<div class="form-group">
<input type="text" id="game-time-passed-{{$index}}" class="form-control"
readonly="true" input-loaded="myFunction(this)">

In short: Is there anyway to access inputs when they are loaded or fire some kind of an event whith their value? Plain JavaScript would be very nice.

Answer Source

So guys I've found an answer myself after some struggles.

I'm using a custom directive which is fired when the last element of ng-repeat is reached and is rendered, still not seen in browser. Just what I wanted to do.

Here is my solution:

1. Register a custom directive through a namespace from another function:

const CUSTOMDIRECTIVE = require('./CustomDirectives.js');

// Main APP:
angular.module('LoLWatcher', []);

* Register Directives

// Register Sepctate Timers Directive
angular.module('LoLWatcher').directive('spectateFinishedLoadingTimers', CUSTOMDIRECTIVE.spectateFinishedLoadingTimers);

2. In my custom directives my code looks like this now:


* Global Variables and Modules
// Error Logger
const ERRORLOGGER = require('../Helpers/ErrorLogger.js');

CUSTOMDIRECTIVES.spectateFinishedLoadingTimers = function(){
  // Activate Strict Mode
  'use strict';
  // Add Name Parameter to Function
  CUSTOMDIRECTIVES.spectateFinishedLoadingTimers.FuncName = 'CUSTOMDIRECTIVES.spectateFinishedLoadingTimers';

  try {
    // Return directive Object.
    return {
      // Restrict by Attribute.
      restrict: 'A',
      // Link Function to directive.
      link: function (scope, element, attr) {
        // If is last element in ng-repeat...
        if (scope.$last) {
          // ... run async callback from attribute.

  } catch (e) {
    //Logg complete error
    //future user error codes
    console.log(ERRORLOGGER.standardErrorLog(CUSTOMDIRECTIVES.spectateFinishedLoadingTimers.FuncName, 'functionError'));

3. After that I had to modify my html with my custom attribute to this ($last &&... makes sure to fire my function only if the last element was reached):

<div class="row-fluid"  ng-model="personList" ng-repeat="person in personList| filter:featuredPersons(filter)" spectate-finished-loading-timers="$last && timersFinishedLoading()">

4. The last thing to do was to register my custom function to my controller/scope:

// Function fired from Attribute
$scope.timersFinishedLoading = function(){
  console.log('done rendering but not loaded in browser');
  // Plain easy JS!
  let div = document.querySelectorAll('[id^=time-passed-]');
  for(let i= 0; i < div.length; i++){
     * Do Stuff with Timers

This all allows me to get my values from all generated inputs and alter them befor they appear in the browser, or in my case in electron. Since I work alot with namespaces and modules this saved me the 'dirty' part.

One last thing, if you guys downvote a question, at least write a comment why you did it and help others to improve! We all startet small and are still learning... just saying.

I hope this will help someone with the same problem.

Regards, Megajin

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download