CODEWITHSUNDEEP
angularjsangularjs-directive
randy
randy

Reputation: 1877

Angularjs adding directive on click

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

Upvotes: 0

Views: 64

Answers (1)

Mohayemin
Mohayemin

Reputation: 3870

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;
        .
        .
};

Upvotes: 1

Related Questions