使用ID生成輸入時的消防功能

-1

我的模型有一個正常的ng重複。除了我的輸入外，一切都正常工作......我需要在輸入獲取其數據時運行JavaScript函數。使用ID生成輸入時的消防功能

<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會非常好。

來源

2016-08-26 Megajin

好像你正在接近這個錯誤的方式。 – epascarello

@PhiterFernandes謝謝你的回答，但我說的是純JavaScript。看我的答案，看看我的完整解決方案。 – Megajin

@epascarello請解釋你的意思是'錯誤的方式'。看看我的怒氣並告訴我，如果我的解決方案更好，或者有改進的空間。 – Megajin

所以，我經過一番鬥爭後，自己找到了答案。

我正在使用一個自定義指令，它在達到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與我的自定義屬性本（$最後& & ......確保火我的函數只有在最後一個元素達到）：

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

這一切都讓我從所有生成的投入得到了我的價值觀，並改變他們befor它們出現在瀏覽器中，或在我的電子情況。由於我的命名空間和模塊很多，這爲我節省了「髒」部分。

最後一件事，如果你們倒下了一個問題，至少寫下評論你爲什麼這樣做，並幫助別人改進！我們都開始小，仍然在學習......只是說。

我希望這會幫助有同樣問題的人。

問候， Megajin

來源

2016-08-30 17:47:16 Megajin

Angular和類似框架的意義在於您不必處理DOM，只需要擔心數據。您的輸入似乎與數據綁定。在這種情況下，在keypath上使用observe可在數據更改時運行函數。

來源

2016-08-26 16:05:36 Joseph

感謝您的回答，我找到了一個自定義指令的解決方案。無論如何，我要看看'觀察'。 – Megajin

使用ID生成輸入時的消防功能

回答

相關問題