Подтвердить что ты не робот

Вызов функции AngularJS для документа готов

Есть ли способ вызвать функцию Angular из функции JavaScript?

function AngularCtrl($scope) {
  $scope.setUserName = function(student){  
    $scope.user_name = 'John';
  }
}

Мне нужны следующие функции в моем HTML:

jQuery(document).ready(function(){
  AngularCtrl.setUserName();
}

Проблема в том, что мой HTML-код присутствует, когда страница загружена, и, следовательно, директивы ng в html не компилируются. Поэтому я хотел бы $compile(jQuery("PopupID"));, когда DOM загружен.

Есть ли способ вызвать функцию Angular в готовом документе?

Ответ 1

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

angular.element(document).ready(function () {
    var $injector = angular.bootstrap(document, ['myApp']);
    var $controller = $injector.get('$controller');
    var AngularCtrl = $controller('AngularCtrl');
    AngularCtrl.setUserName();
});

Для этого вам нужно удалить директиву ng-app из html.

Ответ 2

Ответ выше, хотя правильный, является анти-шаблоном. В большинстве случаев, когда вы хотите изменить DOM или дождаться загрузки DOM, а затем сделать материал (готовый документ), вы не делаете этого в контроллере, а в его функции ссылок.

angular.module('myModule').directive('someDirective', function() {
  return {
    restrict: 'E',
    scope: {
      something: '='
    },
    templateUrl: 'stuff.html',
    controller:  function($scope, MyService, OtherStuff) {
        // stuff to be done before the DOM loads as in data computation, model initialisation...
    },
    link: function (scope, element, attributes) 
        // stuff that needs to be done when the DOM loads
        // the parameter element of the link function is the directive jqlite wraped element
        // you can do stuff like element.addClass('myClass');
        // WARNING: link function arguments are not dependency injections, they are just arguments and thus need to be given in a specific order: first scope, then element etc.
    }
  };
});

Всем честно, действительное использование $document или angular.element крайне редко (неспособно использовать директиву вместо простого контроллера), и в большинстве случаев вам лучше рассмотреть ваш дизайн.

PS: Я знаю, что этот вопрос старый, но все же должен был указать на некоторые лучшие практики.:)