Angularjs adding directive on click

Question

i have table that has this body

 <tbody >
        <tr ng-repeat="con in mycon | array | filter:search | orderBy:predicate:reverse" 
            ng-click="showhistory($event,con.conid)">

            <td >{{ con.fname }}</td>
            <td >{{ con.lname }}</td>
        </tr>

 </tbody>

When the row is click i call this function my my controller

    $scope.showhistory = function ($event,cid) {
        $event.stopPropagation();
        var contentTr = angular.element('<con_history ></con_history>');
        contentTr.insertAfter(angular.element($event.target).parent());
        $compile(contentTr)($scope);
        $scope.$apply
    };

And i can see that the con_history tags get added. But it doesn't render the directive. When I add the directive i do not see BLAH BLAH , I only see the con_history tag

this is my directive

app.directive('con_history', function() {
    return {
      restrict: 'AE',
      replace: 'true',
      template: '<tr><td colspan="11">BLAH BLAH</td></tr>'
    };
});

thanks for any help

Mohayemin · Accepted Answer · 2014-09-24 04:01:34Z

1

You are not doing it in angular way, I think this is what you want to do:

<tr ng-repeat="con in mycon | array | filter:search | orderBy:predicate:reverse" 
                ng-click="showhistory($event,con.conid)">

    <td >{{ con.fname }}</td>
    <td >{{ con.lname }}</td>
</tr>
<con_history ng-if="historyVisible[con.conid]"></con_history>

in your controller

$scope.historyVisible = {};
$scope.showhistory = function ($event,cid) {
        .
        .
        $scope.historyVisible[cid] = true;
        .
        .
};

answered Sep 24, 2014 at 4:01

Mohayemin

3,8704 gold badges29 silver badges55 bronze badges

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

1 Comment

randy Over a year ago

thanks for the response. What i am trying to do is when the user clicks on a row to dynamically add a directive which in turn the directive makes an ajax call to populate itself with data. So i do not want the directive there until it is needed. IS there a better way to do this?

Collectives™ on Stack Overflow

Angularjs adding directive on click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related