Question

我的模型有正常的ng-repeat。除了我的输入之外，一切都运行良好......我需要在输入获取数据时运行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会非常好。

Answer 1

Angular和类似框架的关键在于您不必处理DOM并且只担心数据。您的输入似乎与数据绑定。在这种情况下，在密钥路径上使用observe以在数据更改时运行函数。

Answer 2

所以，经过一番挣扎，我自己找到了答案。

我正在使用一个自定义指令，该指令在达到并呈现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);

<强> 2。在我的自定义指令中，我的代码现在看起来像这样：

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'));
  }
};

第3。之后我不得不用我的自定义属性修改我的html（$ last＆amp;＆amp; ...确保仅在达到最后一个元素时触发我的函数）：

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

<强> 4。最后要做的是将我的自定义函数注册到我的控制器/范围：

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

这一切都允许我从所有生成的输入中获取我的值，并在浏览器中显示它们，或者在我的情况下在电子中显示。由于我在命名空间和模块上工作很多，这为我节省了“脏”部分。

最后一件事，如果你们想问一个问题，至少写一条评论为什么你这样做并帮助别人改进！我们都很小，还在学习......只是说。

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

此致 Megajin

使用ID

2 个答案: