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

尝试使用（只是提示）：

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

这是使用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;
};

如果你在角度应用程序中发现自己在思考如何使某些东西影响其元素之外的东西，那就去吧。：）

P.S。这是一种通用方式，当然你可以通过指令实现相同的目的。例如：

<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();
             });
        }
    };
});

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

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

2 个答案:

HTML

JS