Question

我遇到一些问题，让我更熟悉用jj加载html然后将其添加到视图中。模板已经加载然后我需要通过ajax外部获取一些数据并将其放在元素中。但AngularJs在所有这些之前运行，我希望它等到所有数据都加载完毕。

编辑：只是为了澄清，这是代码，我运行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'
                    ] 
                });
            }]
        }
    });

和..

     'use strict';

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

Answer 1

当你认为你的文档准备就绪时（例如在jQuery回调中），你应该运行ng-app而不是使用angular.bootstrap(document, ['app']);指令启动应用程序;

请注意，您也可以在Angular中使用jQuery Ajax函数，但是您需要使用$scope.$apply包装DOM中的任何更改，以使Angular了解jQuery的操作）：

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

但考虑（这将是最好的解决方案）在Angular中嵌入ajax代码，$http服务与jQuery.ajax的区别不大，特别是如果您熟悉jQuery的承诺。

Answer 2

你可以制作自定义指令并在链接函数

中调用你的jquery插件

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

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

并在您的视图中

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

使用jQuery动态地将html加载到AngularJs中

2 个答案: