Не могу понять, как вызвать функцию angularjs через html страницу?

Question

[vlzkonopatov]

У меня есть функция

$scope.setSelectionRange = function(input, selectionStart, selectionEnd) {
        if (input.setSelectionRange) {
          input.focus();
          input.setSelectionRange(selectionStart, selectionEnd);
        }
        else if (input.createTextRange) {
          var range = input.createTextRange();
          range.collapse(true);
          range.moveEnd('character', selectionEnd);
          range.moveStart('character', selectionStart);
          range.select();
        }
    };

Которая выполняет перемещение курсора на нужное место.
Есть кнопка

<button ng-click="setCaretToPos()">Set Caret Position</button>

Которая и вызывает функцию

$scope.setCaretToPos = function() {
         $scope.setSelectionRange(document.getElementById("id_code"), $scope.caretPos, $scope.caretPos);
    };

И есть модальное окно

<div class="modal fade" id="id_code_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content"  >
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="{% trans "Close" %}"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">{% trans 'Insert your page code' %}
                        </h4>
                    </div>
                    <div class="modal-body">
                    <textarea name="code" id="id_code" style="width: 100%;" rows="16"
                              data-ng-model="current_static_page_code"></textarea>
                    </div>
                    <button ng-click="setCaretToPos()">Set Caret Position</button>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary"
                                ng-click="createPage()">{% trans "Create" %}</button>
                    </div>
                    <div ng-app="" ng-controller="setCaretToPos">
                </div>
            </div>
        </div>

Как мне сделать что-бы функция вызывалась не по нажатию, а при появлении модального окна

Answer 1

[Kano]

Подходов множество.
Один из них это создать свою директиву которая выполняет указанный функционал и назначит ее на нужный элемент. Затем, например, можно воспользоваться функционалом angular-ui (https://angular-ui.github.io/bootstrap/) и добавить модальное окно (как указано в примере). После этого при появлении модального окна у вас будет каждый раз срабатывать ваша директива.
Никаких событий и операций с dom внутри контроллера (для операций над dom есть директивы)