Angularjs在点击时添加指令

时间:2014-09-24 03:49:46

标签: angularjs angularjs-directive

我有一个有这个身体的桌子

 <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>

当单击该行时,我将此功能称为我的控制器

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

我可以看到con_history标签被添加了。但它并没有提出指令。当我添加指令时,我看不到BLAH BLAH,我只看到con_history标记

这是我的指示

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

感谢您的帮助

1 个答案:

答案 0 :(得分:1)

你没有采取棱角分明的方式,我认为这就是你想做的事情:

<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>
控制器中的

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