angularjs - change - Llame a la función angular en el documento listo

page title angular 4

Question

¿Hay una manera de llamar a la función angular de la función javascript?

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

Necesito la siguiente funcionalidad en mi html:

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

El problema aquí es que mi código HTML está presente cuando se carga la página y, por lo tanto, no se compilan las directivas ng en el html. así que me gustaría compilar $ (jQuery ("PopupID")); cuando se carga el DOM.

¿Hay una manera de llamar a una función angular en el documento listo? ¿Puede alguien ayudarme con esto?

Answer 1

Angular tiene su propia función para probar en el documento listo. Podría hacer un arranque manual y luego establecer el nombre de usuario:

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

Para que esto funcione, debe eliminar la directiva ng-app del html.

Answer 2

La respuesta anterior aunque correcta, es un anti-patrón. En la mayoría de los casos, cuando desea modificar el DOM o esperar a que el DOM se cargue y luego hacer cosas (documento listo) no lo hace en el controlador sino en la función de enlace.

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

Honestamente, el uso válido de $ document o angular.element es extremadamente raro (no se puede usar una directiva en lugar de solo un controlador) y, en la mayoría de los casos, es mejor revisar su diseño.

PD: Sé que esta pregunta es antigua pero aún debo señalar algunas de las mejores prácticas. :)