如何在当前元素之外显示指令

Question

我需要创建一个在当前元素之外呈现的指令。

我当前的示例基于表格单元格内的指令。我希望渲染在当前旁边创建一行

 <table>
  <tr>
   <td>
    <a mydirective></a>
   </td>
  </tr>
 </table>

点击后会产生

 <table>
  <tr>
   <td>
    <a mydirective></a>
   </td>
  </tr>
  <tr>
   <td>
    CLICKED !
   </td>
  </tr>
 </table>

这可以通过链接功能实现吗？我还能使用模板 + 控制器选项吗？

Answer 1

尝试使用 like（只是为了提示）：

.html

<div data-ng-controller="MainController">
  <table>
    <tr ng-repeat="item in items">
      <td><a my-directive>{{item}}</a></td>
    </tr>
  </table>
</div> 

.js

angular.module('myApp', [])
        .controller('MainController', function($scope, $http) {
            $scope.items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
        })
        .directive('myDirective', function($timeout) {
            return {
                restrict: 'A', //attribute only
                link: function(scope, element) {
                    element.on('click', function() {
                        var tr = angular.element(this).parent().parent();
                        tr.after('<tr><td>CLICKED !</td></tr>');
                    });
                    element.on('$destroy', function() {
                        element.off('click');
                    });
                }
            }
        });

Answer 2

Tbh 这是一种使用 Angular 做你想做的事情的非正统方式，我认为更好的方法是以不同的方式建模，添加一个叠加模型实体：

<table ng-controller="TableController">
      <tr><td ng-click="toggleRowClick();">Click here</td></tr>
      <tr ng-if="rowClicked"><td>Clicked</td></tr>
</table>

在控制器中：

$scope.rowClicked = false;
$scope.toggleRowClick = function() {
    $scope.rowClicked = !$scope.rowClicked;
};

如果你发现自己在你的角度应用程序中思考如何让某些东西影响其元素之外的东西，那就走得更高。 :)

附言这是一种通用方法，当然您可以通过指令实现相同的目的。例如：

<tr my-directive="rowClicked"><td>Click here</td></tr>
angular.module('app').directive('myDirective', function() {
    return {
        scope: {
            clickToggle: '=myDirective'
        },
        link: function($scope, $el) {
             $el.on('click', function() {
                 $scope.clickToggle = !$scope.clickToggle;
                 $scope.$apply();
             });
        }
    };
});

当然，如果指令这么简单，使用前面的例子会更容易。