Javascript 使用id生成输入时激发函数

我对它的模型有一个正常的ng重复。除了我的投入，一切都很好。。。我需要在输入获取数据时运行JavaScript函数

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

我只是在输入生成时无法访问它。我知道我不能在输入上使用onload。。。当一切都完成后，我可以去做，但那感觉不对。我需要在数据进入输入框的那一刻修改数据，并在输入框上注册一种定时器，并使用它的值

我还可以在我的输入下放置一个脚本标记，并启动一个自调用函数，但我希望保持干净。最好是角度属性或其他类似的属性：

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

---

简言之：在加载输入或触发某种具有其值的事件时，是否仍然可以访问输入？纯JavaScript非常好。

Angular和类似框架的要点是，您不必处理DOM，只需担心数据。您的输入似乎已绑定到数据。在这种情况下，当数据发生变化时，使用键路径来运行函数。

所以伙计们，经过一些努力，我自己找到了答案

我使用的是一个自定义指令，当到达ng repeat的最后一个元素并进行渲染时触发，但在浏览器中仍然看不到该指令。这正是我想做的

以下是我的解决方案：

1。通过另一个函数的命名空间注册自定义指令：

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

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

/**
* Register Directives
*/

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

var CUSTOMDIRECTIVES = module.exports = CUSTOMDIRECTIVES || {};

/**
* 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.
           scope.$evalAsync(attr.spectateFinishedLoadingTimers);
        }
      }
    };

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

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

// 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
     */
  }
};

2。在我的自定义指令中，我的代码如下所示：

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

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

/**
* Register Directives
*/

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

var CUSTOMDIRECTIVES = module.exports = CUSTOMDIRECTIVES || {};

/**
* 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.
           scope.$evalAsync(attr.spectateFinishedLoadingTimers);
        }
      }
    };

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

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

// 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
     */
  }
};

3。在此之后，我必须使用自定义属性修改我的html（$last&&…确保仅在到达最后一个元素时启动我的函数）：

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

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

/**
* Register Directives
*/

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

var CUSTOMDIRECTIVES = module.exports = CUSTOMDIRECTIVES || {};

/**
* 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.
           scope.$evalAsync(attr.spectateFinishedLoadingTimers);
        }
      }
    };

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

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

// 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
     */
  }
};

4。最后一件事是将自定义函数注册到控制器/作用域：

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

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

/**
* Register Directives
*/

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

var CUSTOMDIRECTIVES = module.exports = CUSTOMDIRECTIVES || {};

/**
* 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.
           scope.$evalAsync(attr.spectateFinishedLoadingTimers);
        }
      }
    };

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

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

// 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
     */
  }
};

//从属性激发的函数
$scope.timersFinishedLoading=函数（）{
log（'已完成渲染，但未加载到浏览器'）；
//简单易懂！
让div=document.querySelectorAll（“[id^=time passed-]”）；
for（设i=0；i

这一切都允许我从所有生成的输入中获取我的值，并在它们出现在浏览器中之前或在electron中更改它们。由于我经常使用名称空间和模块，这就省去了“脏”的部分

最后一件事，如果你们否决了一个问题，至少写一条评论，说明你们为什么这么做，并帮助其他人改进！我们都从小开始，还在学习。。。只是说说而已

我希望这将帮助有同样问题的人

问候,，

---

Megajin

看来你的做法是错误的。@Phitherfernandes谢谢你的回答，但我说的是纯JavaScript。看看我的答案，看看我的完整答案。@epascarello请解释一下“错误的方式”是什么意思。看看我的答案，告诉我我的解决方案是否更好，或者是否还有改进的余地。谢谢你的回答，我已经找到了一个带有自定义指令的解决方案。不管怎样，我要看一看“观察”。