如何仅在 textarea 完全加载后运行 controller function？

Question

I have a textarea like below:

<textarea rows="3" maxlength="144" ng-maxlength="144" type="text"
          name="testPost" id="testPost_{{item.id}}"
          ng-init="focusText('testPost', item.id)"
          ng-model="item.testPost">
</textarea>

with a function like below:

$scope.focusText = function (columnSelected, id){
    if(columnSelected == "testPost"){
        var textId = "testPost_" + id;
        document.getElementById(textId).focus();
        document.getElementById(textId).setSelectionRange(0,0);
    } 
}

The problem is, document.getElementById(textId) is null as function is ran before the textarea is loaded. How can I run the function only after textarea is loaded?

Answer 1

The problem is, document.getElementById(textId) is null

Create a custom directive:

app.directive("myInit", function() {
   return {
       link: postLink
   };
   function postLink(scope, element, attrs)
       scope.$eval(attrs.myInit, {$element: element})
   }
})

Then pass the $element local to the function:

<textarea rows="3" maxlength="144" ng-maxlength="144" type="text"
          name="testPost" id="testPost_{{item.id}}"
          my-init="focusText('testPost', item.id, $element)"
          ng-model="item.testPost">
</textarea>

Use the $element parameter in the focusText function:

$scope.focusText = function (columnSelected, id, $element){
    if(columnSelected == "testPost"){
        $element[0].focus();
        $element[0].setSelectionRange(0,0);
    } 
}

This avoids using document.getElementById and the error.