DOM manipulation through DIRECTIVES JS

[Sunny Negi]

Appending <tr> </tr> <li></li> through directive.js, I have modal box that contain ul list and table list contain user name with check box, and while clicking on check box it's delete the  li where you click and append the  <tr> to  tbody, now tbody contain usename with check box . one more time if you click on checkbox of tr then it's delete the data and append to li

issue is sometime it's not append the li and tr

my code for modal

<div class="modal-header">
        <button aria-hidden="true" ng-click="cancel()" class="close" type="button">×</button>
        <h2>Setting group pick-up...</h2>
    </div>
    <div class="modal-body">
        <div class="form-group">
            <label class="col-lg-3">Name this ring group</label>
            <div class="col-lg-6">
                <input type="text" class="form-control" value="" ng-model="selected.text" >
            </div>
        </div><br><br>
        <div class="form-group">
            <label class="col-lg-3"> Ring Strategy</label>
            <div class="col-lg-6">
                <select class="form-control uniformselect" ng-model="selected.item">
                    <option value="">Select Ring Strategy</option>
                    <option value="At the same time"> At the same time</option>
                    <option value="In order"> In order</option>                    
                </select>
            </div>
        </div><br><br>
        <div class="form-group">
            <label class="col-lg-3">Ringback</label>
            <div class="col-lg-6">
                <select class="form-control uniformselect"  ng-model="selected.item">
                    <option ng-repeat="item3 in list3" >
                        {{item3.name}}
                    </option>
                </select>
            </div>
            <div class="form-group">
                <label class="col-lg-6"></label>
                <div class="col-lg-0">
                    <a  style="cursor: pointer;" ng-click="editUserFunc(selected.item)"><h6>Create</h6></a>                
                </div>
            </div>
        </div><br>
        <br>
        <div class="col-lg-6">
        <div class="tabbable">
                <ul class="nav nav-tabs buttons-icons">
                    <li class="active"><a style="cursor: pointer;" data-toggle="tab" data-target="#basic1">User</a></li>
                       <li><a style="cursor: pointer;" data-toggle="tab" data-target="#callerId">Devices</a></li>
                </ul>
            <div class="tab-content">
                <div id="basic1" class="tab-pane active" >
                     <ul id="list1" ng-repeat="item1 in list1">
                          <li id={{item1.id}} > <input  type="checkbox" value="{{item1.id}}" ng-click="checked(item1.username,item1.id)"> {{item1.username}} </li>
                     </ul>
                    <ul device-data template="{{oldTransaction}}">
                   
                    </ul>    
                   </div><!--tab-pane-->
                 <div id="callerId" class="tab-pane">
                     <ul id="list2" ng-repeat="item2 in list2">
                          <li id={{item2.id}}> <input type="checkbox" value="{{item2.id}}" ng-click="Nextchecked(item2.name,item2.id)"> {{item2.name}} </li>
                    </ul>
                    <ul dev-data template="{{revTransaction}}">
                   
                    </ul>    
                </div>
            </div>
        </div>
        </div>
        <div class="col-lg-6">
        <div class="jarviswidget jarviswidget" data-widget-editbutton="false" id="wid-id-mr">        
                    <header>
                        <span class="widget-icon"> <i class="fa fa-table"></i> </span>
                        <h2>Ring Group</h2>
                    </header>
                    <div>
                        <div class="jarviswidget-editbox"></div>
                        <div class="widget-body no-padding">
                            <table id="sort" class="table table-striped table-bordered table-hover" width="100%">
                                <thead>
                                    <tr>
                                        <th>
                                            Ring Group
                                        </th>
                                        <th>
                                            Delay(s)
                                        </th>
                                        <th>
                                            Timeout(s)
                                        </th>
                                        <th>
                                            Delete
                                        </th>
                                    </tr>
                                </thead>
                                <tbody compile-data template="{{newTransaction}}">

                                </tbody>
                            </table>
                        </div> <!-- end widget content -->
                    </div> <!-- end widget div -->
                </div>
            </div>
      </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>

Code for Controolers

$scope.checked = function(user, Id){
        inc++;
        $("#"+Id).remove();
        $scope.newTransaction = tempService(user, Id, inc);
        $scope.endpoints.push({"timeout":$scope.selected.Timeout, "delay":$scope.selected.Delay, "id":Id,"endpoint_type":"user"});
        console.log($scope.endpoints);
    }
   
    $scope.reverse = function(user, Id, inc){
        var index = functiontofindIndexByKeyValue($scope.endpoints, "id", Id);
        $scope.endpoints.splice(index, 1);
        inc++;
        $scope.oldTransaction = reverseService(user, Id, inc);
        var revId = $("#delete").closest('tr').attr('id');
        console.log(revId);
        $("#"+revId).remove();
    }
   
    $scope.revChecked = function(user, Id, inc){
        $scope.endpoints.push({"timeout":$scope.selected.Timeout, "delay":$scope.selected.Delay, "id":Id,"endpoint_type":"user"});
        inc++;
        $scope.newTransaction = tempService(user, Id, inc);
        var norev = $("#reverse").closest('li').attr('id');
        console.log(norev);
        $("#"+norev).remove();
    }

code for Directive  

Enter code here...callflowCtrl.directive('compileData', function ($compile) {
    return {
        scope: true,
        link: function ( scope, element, attrs, controller ) {
            var elmnt;
            attrs.$observe( 'template', function ( myTemplate ) {
                    elmnt = $compile( myTemplate )( scope );
                    element.append( elmnt );
            });
        }
    };
});

callflowCtrl.factory( 'tempService', function () {
    return function (user, Id, inc) {

        return "<tr id="+inc+"><td>"+user+"</td> <td> <input type='text' class='form-control' value='0' name='disaPopnumb' ng-model='selected.Delay'></td> <td><input type='text' class='form-control' value='20' name='disaPopnumb' ng-model='selected.Timeout'> </td> <td><a style='cursor:pointer'><i id='delete' ng-click=\"reverse('"+user+"','"+Id+"','"+inc+"')\" class='fa fa-trash-o large'></i></a></td> </tr>";
    };
});

callflowCtrl.directive('deviceData', function ($compile) {
    return {
        scope: true,
        link: function ( scope, element, attrs, controller ) {
            var elmnt;
            attrs.$observe( 'template', function ( myTemplate ) {
                    elmnt = $compile( myTemplate )( scope );
                    element.append( elmnt );
            });
        }
    };
});

callflowCtrl.factory( 'reverseService', function () {
    return function (user, Id, inc) {
        return "<li id="+inc+"> <input id='reverse' ng-click=\"revChecked('"+user+"','"+Id+"','"+inc+"')\" type='checkbox'>"+user+"</li>";
    };
});

[Sander Elias]

Hi Sunny,

Building a plunk will enhance your change that you will get answer faster. 

Regards

Sander

[Sunny Negi]

Sorry for not giving the plunker i am unable to make that. Now i am work on DOM manipulation through controllers.js but still got some problem   sometimes, it's delete or sometimes it replace upper data

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/8mgLe5sSqbE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Sander Elias]

Hi Sunny,

I'm sorry, but I lack the time to wade trough your wad of code you dumped here.

When you can't get plunk to run, there are numerous alternatives(jsFiddle/jsBin/codePen and so on).

You should refrain yourself from doing DOM manipulation in controllers. It will result in an maintenance nightmare.

Read trough this styleguide for more background information.

Regards

Sander