This topic contains 4 replies, has 2 voices, and was last updated by Sean Sean 2 years, 9 months ago.

In "table-actions-wrapper" angularJs does not work.


  • Ilsun Hong
    Participant

    Posts: 8
    Member Reply #5007

    In the source (/theme/admin_1_angularjs/views/datatables/ajax.html),

    You can find the below tag.

    <div class=”table-actions-wrapper”>

    but, in this element. angularjs is not working.

    for example, {{active}} is not translated by angluarjs even when $scope has the value.

    However, others {{element}} not in the tag work properly.

    When I find this problem, I think the below line (/theme/assets/global/scripts/datatable.js)is the problem.

    if ($(‘.table-actions-wrapper’, tableContainer).size() === 1) {

    $(‘.table-group-actions’, tableWrapper).html($(‘.table-actions-wrapper’, tableContainer).html()); // place the panel inside the wrapper

    $(‘.table-actions-wrapper’, tableContainer).remove(); // remove the template container

    }

    But it is not.

    Can you explain this ?

     

    • This topic was modified 2 years, 9 months ago by  Ilsun Hong.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #5042

    Hi,

    Did you try to initialize/render the angularJS scope/value after datatable instance and its HTML code fully generated ? If not, could you please try it first ?

    Thanks.


    Ilsun Hong
    Participant

    Posts: 8
    Member Reply #5051

    Can you explain how to initialize/render?

    I just use the General Controller you provided for testing the angularJS theme.

     

    <div class=”portlet-body”>

    <!– BEGIN TABLE –>

    <div class=”table-container”>

    <div class=”table-actions-wrapper”>

    <!– for test <div>active : {{filter.active}}</div> –>

    <div class=”btn-group”>

    <label class=”btn btn-info” ng-model=”filter.active” uib-btn-radio=”””>All</label>

    <label class=”btn btn-info” ng-model=”filter.active” uib-btn-radio=”‘active'”>Active</label>

    <label class=”btn btn-info” ng-model=”filter.active” uib-btn-radio=”‘deleted'”>Deleted</label>

    </div>

    </div>

    <table class=”table table-striped table-bordered table-hover” id=”feature_data_table”>

    this is the source which is not working.


    Ilsun Hong
    Participant

    Posts: 8
    Member Reply #5055

    Sorry, I found some cause. Tomcat did not reload the changed source.

    This problem was happened because of the below line.

    if ($(‘.table-actions-wrapper’, tableContainer).size() === 1) {
    $(‘.table-group-actions’, tableWrapper).html($(‘.table-actions-wrapper’, tableContainer).html()); // place the panel inside the wrapper
    $(‘.table-actions-wrapper’, tableContainer).remove(); // remove the template container
    }

    Html tags jQuery made were not linked to angularjs $scope, so I solved this problem as the below.

    1. Delete the above lines.

    2. add the below lines in $viewContentLoaded.

    var template = angular.element($(‘.table-actions-wrapper’).eq(0).html());

    $compile(template)($scope);

    $(“.table-group-actions”).append(template);

     

    • This reply was modified 2 years, 9 months ago by  Ilsun Hong.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #5085

    Hi,

     

    If possible can you please provide us a test link to your page in a private reply ? We will need to check your code in order to give you any further advice.

    The

You must be logged in to reply to this topic.