Question

问题

我们正在使用角度＆amp; jquery的。
将状态表示仪表板转换为mylog时会出现问题。
当我为mylogs运行url时，datatable正在运行，没有错误。
然后我点击仪表板它没有错误。
然后我再次单击mylogs链接，然后angular js将找不到jquery datatable函数。
因此会抛出错误

角度代码

  var sbAdmin2 = angular.module('sbAdmin2', ['ui.router','ngSanitize']);
  sbAdmin2.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/dashboard/data');

    $stateProvider
         .state('Dashboard', {
            url: '/dashboard/data',
            templateUrl: 'http://localhost/weblogs-s2/web/weblogs_dev.php/dashboard/data'
        })
                 .state('My Logs', {
                            url: '/my_dt_test',
                            data: {
                                pageHeader: 'My Logs',
                                ncyBreadcrumbLabel: 'My Logs'
                            },
                            ncyBreadcrumb: {
                                label: 'My Logs'
                            },
                            views: {
                                "@": {
                                    templateUrl: 'http://localhost/weblogs-s2/web/weblogs_dev.php/my_datatable_list1'

                                }
                            }
                        })

HTML

   <script src="http://code.jquery.com/jquery-2.1.1.js"></script>
   <script src="{{ asset ('common/assets/libs/jquery/jquery-ui/js/jquery-ui.min.js') }}?v={{ app_version }}"></script>
    <script src="{{asset('common/assets/libs/angular/source/angular.js') }}?v={{ app_version }}_{{ NOW }}"></script>
    <script src="{{ asset ('common/assets/libs/angular/source/modules/angular-ui-router.js') }}?v={{ app_version }}_{{ NOW }}"></script>
     <script src="{{ asset ('common/assets/libs/angular/source/modules/angular-sanitize.js') }}?v={{ app_version }}_{{ NOW }}"></script>


        <!-angular version 1.06------>
         <body>
         <div id="test" ui-view>
         {% body_block %}{%endblock%}
          </div>
           </body>

数据表以html视图呈现

          var dataTableVar_eserv_mylogs_new_table = $('#eserv_mylogs_new_table').dataTable({
            "columns": [{"sTitle":"Job_NO","sName":"logId"},{"sTitle":"customer","sName":"customer"}],
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": dataTable_ajax_source_eserv_mylogs_new_table,
            "sPaginationType": "full_numbers",
            "asStripeClasses": null,
            "iDisplayLength": 10,
            //"colReorder": true,



            "paging": true,


            buttons: [{
            extend: 'colvis',
            text: 'Custom Columns',
            className: 'btn btn-default pull-right extra_btn'
        }],
            "oLanguage": {
                "sProcessing": (typeof PreloaderImagePath != 'undefined' ? '<img alt="Loading data... Please wait" src="' + PreloaderImagePath + '" />' : 'Processing...'),
                "sInfoFiltered": " (filtered from _MAX_ total entries)",
                "oPaginate": {
                    "sFirst": "First",
                    "sLast": "Last",
                    "sNext": "Next",
                    "sPrevious": "Previous"
                },
                "sZeroRecords": "No data available in table",
                "sInfoEmpty": "Showing 0 to 0 of 0 entries",
                "sInfo": "Showing _START_ to _END_ of _TOTAL_ entries",
                "sLengthMenu": '<span class="desktop_inline_text">Show</span> _MENU_ <span class="desktop_inline_text">Rows</span>'
            },

我们通过symfony2库渲染数据表。

  on page reload its working then its stop working on swapping state

错误即将到来

     TypeError: $(...).dataTable is not a function
at eval (eval at globalEval (http://code.jquery.com/jquery-2.1.1.js:330:5), <anonymous>:18:84)
at Function.globalEval (http://code.jquery.com/jquery-2.1.1.js:330:5)
at jQuery.domManip (http://code.jquery.com/jquery-2.1.1.js:5411:16)
at jQuery.append (http://code.jquery.com/jquery-2.1.1.js:5194:15)
at jQuery.<anonymous> (http://code.jquery.com/jquery-2.1.1.js:5309:18)
at jQuery.access (http://code.jquery.com/jquery-2.1.1.js:3465:8)
at jQuery.html (http://code.jquery.com/jquery-2.1.1.js:5276:10)
at http://localhost/weblogs-s2/web/common/assets/libs/angular/source/modules/angular-ui-router.js?v=1.6.10_1475157720:2791:18
at invokeLinkFn (http://localhost/weblogs-s2/web/common/assets/libs/angular/source/angular.js?v=1.6.10_1475157720:8525:9)
at nodeLinkFn (http://localhost/weblogs-s2/web/common/assets/libs/angular/source/angular.js?v=1.6.10_1475157720:8034:11) <div id="wrapper" ui-view="" class="container ng-scope font_size_100">

我试图调试此问题角度代码段

        .state('My Logs', {



                        url: '/my_dt_test',

                         views: {



                            "@": {



                                templateUrl: function ($node) {

                                    console.log("testing");

                                    return root_url + 'my_datatable_list1';
                                }


                            }

                        }
                       })

问题我发现当我重新加载url mydb_test时，数据表是可见的，没有错误。
当我改变状态后，我在console.log中获取值，但不会返回任何模板文件。
它只显示错误dataTable不是一个函数，我认为jquery正在做一些问题。

我们需要什么

我们第一次检查jquery加载是否排在最前面，但是当angular js工作时，它将无法调用jquery的dataTable函数。
请在这个问题上提出建议。

Answer 1

在run block之后添加state-change，捕获state-change-success并重新加载数据表。

var sbAdmin2 = angular.module('sbAdmin2', ['ui.router','ngSanitize']);
  sbAdmin2.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/dashboard/data');

    $stateProvider
         .state('Dashboard', {
            url: '/dashboard/data',
            templateUrl: 'http://localhost/weblogs-s2/web/weblogs_dev.php/dashboard/data'
        })
                 .state('My Logs', {
                            url: '/my_dt_test',
                            data: {
                                pageHeader: 'My Logs',
                                ncyBreadcrumbLabel: 'My Logs'
                            },
                            ncyBreadcrumb: {
                                label: 'My Logs'
                            },
                            views: {
                                "@": {
                                    templateUrl: 'http://localhost/weblogs-s2/web/weblogs_dev.php/my_datatable_list1'

                                }
                            }
                        })
    });

    sbAdmin2.run(function($rootScope) {
      $rootScope.$on('$stateChangeSuccess', function(event, toState){ 
        angular.element('#eserv_mylogs_new_table').dataTable();
      })
    })

$（...）。dataTable不是使用角度js的函数

1 个答案: