Dynamically loading html into AngularJs with jQuery

Question

I have some problem getting jQuery which i'm more familiar with to load html with ajax then add this to the view. The template is already loaded then I need to get some data externaly through ajax and put it inside element. But AngularJs runs before all this, I want it to wait until all data is loaded.

Edit: Just to clarify, here is the code, I run the custom.js.

 $stateProvider


    // Companyresults
    .state('companyresults', {
        url: "/companyresults.html",
        templateUrl: "views/companyresults.html",            
        data: {pageTitle: 'Dashboard', pageSubTitle: 'statistics & reports'},
        controller: "CompanyResultsController",
        resolve: {
            deps: ['$ocLazyLoad', function($ocLazyLoad) {
                return $ocLazyLoad.load({
                    name: 'MetronicApp',
                    insertBefore: '#ng_load_plugins_before', // load the above css files before '#ng_load_plugins_before'
                    files: [
                            '../../../assets/admin/layout3/scripts/custom.js',
                        'js/controllers/CompanyResultsController.js'
                    ] 
                });
            }]
        }
    });

And..

     'use strict';

    MetronicApp.controller('CompanyResultsController', function($rootScope, $scope, $http, $timeout) {
        $scope.$on('$viewContentLoaded', function() {   
       // initialize core components
       Metronic.initAjax();
   });
 });

I will recommend you to read “Thinking in AngularJS” if I have a jQuery background? — Satpal
– Satpal, Commented Mar 29, 2015 at 11:33
I would recommend loading AJAX data via Angular's $http service. — SamuelMS
– SamuelMS, Commented Jun 15, 2015 at 8:42

Estus Flask · Accepted Answer · 2015-03-29 12:29:31Z

1

Instead of using ng-app directive to launch the app you should run angular.bootstrap(document, ['app']); when you think your document is ready (e.g. in jQuery callback);

Take notice that you can also use jQuery Ajax functions within Angular, but you need to wrap any changes in DOM with $scope.$apply to make Angular aware of jQuery's actions):

// within Angular controller
jQuery.get(url, function(data) {
    $scope.$apply(function() {
        // any DOM changes
    });
});

But consider (this would be the best solution) embedding ajax code in Angular, $http service doesn't differ too much from jQuery.ajax, especially if you're familiar with jQuery Promises.

edited Mar 29, 2015 at 12:29

answered Mar 29, 2015 at 12:24

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ahmed Adel · Accepted Answer · 2015-03-29 11:41:04Z

0

you can make custom directive and call your jquery plugin inside link function

  var directiveModule = angular.module("directiveModule", []);

    directiveModule.directive('wrapJqueryplugin', function() {
        return {
            restrict : 'E',
            link : function(scope, element, attrs) {        
    *********your jquery code ****************
});

and in your view

    <wrap-jqueryplugin>
***    any Dom Elements ***
    </wrap-jqueryplugin>

answered Mar 29, 2015 at 11:41

Ahmed Adel

1811 gold badge6 silver badges15 bronze badges

Collectives™ on Stack Overflow

Dynamically loading html into AngularJs with jQuery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related