javascript - Angularjs 指令的元素位于嵌入内容的中间

Question

我正在尝试使用 angularjs 创建一个如下所示的分割器指令:

<my-splitter>
  <my-pane1>Pane 1</my-pane1>
  <my-pane2>Pane 2</my-pane2>
</my-splitter>

我想要这样的结果:

<div class="splitter">
  <div class="splitter-pane1">Pane 1</div>
  <div class="splitter-handle"></div>
  <div class="splitter-pane2">Pane 2</div>
</div>

问题是我想将处理程序放在两个 Pane 的中间，但我不知道如何使用 ng-transclude 来完成它。这是js:

angular.module('myModule', [])
    .directive('mySplitter', function() {
        return {
            restrict: 'E',
            replace: true,
            transclude: true,
            template: 'how do i put the handler in the middle of the two panes?'
            ...
        }
    })
    .directive('myPane1', function () {
        return {
            restrict: 'E',
            require: '^mySplitter',
            replace: true,
            transclude: true,
            template: '<div class="split-pane1" ng-transclude><div>'
            ...
        }
    })
    .directive('myPane2', function () {
        return {
            restrict: 'E',
            require: '^mySplitter',
            replace: true,
            transclude: true,
            template: '<div class="split-pane2" ng-transclude><div>'
            ...
        }
    })

Answer 1

这是一个非常简单的选项，但您可以通过多种方式实现。

我认为使用模板无法在不降低其动态性的情况下完成此任务。换句话说，您的父“mySplitter”指令始终可以创建相同的标记，这很好，但如果您想向其添加更多 myPane ，则使用 mySplitter 模板每次都必须改变。我的解决方案简单、易于阅读且动态(根据需要添加任意数量的 Pane ，它们将获得分隔线)。

对于 Pane ，棘手的部分是您似乎希望它们在类名中编号。我不知道你为什么需要它(我怀疑你真的需要它)，但我提供了一个解决方案。您使用每次运行指令都可以看到的变量，但仅初始化一次。该指令的所有运行都可以看到一个范围(请注意我创建变量 count 的位置，然后 link 函数可以访问它，但该函数针对每个运行该指令的用法，因此每次您都可以增加它，为以下指令使用设置count。

Live demo here (click).

var app = angular.module('myApp', []);

app.directive('mySplitter', function($compile) {
  return {
    restrict: 'EA',
    link: function(scope, element, attrs) {
      var children = element.children();
      angular.forEach(children, function(elem, i) {
        if (i < children.length-1) {
          var splitter = angular.element('<div class="splitter-handle">Class is: splitter-handle</div>');
          var child = angular.element(elem);
          child.after(splitter);
        }
      });
    }
  };
});

app.directive('myPane', function() {
  var count = 1; //this runs only once
  return {
    restrict: 'EA',
    transclude: true,
    replace: true,
    scope: {},
    template: '<div class="splitter-pane{{count}}" ng-transclude>Class is: splitter-pane{{count}}</div>',
    link: function(scope, element) { 
      //this runs for each use of "myPane"
      scope.count = count.toString(); //convert to string or there will be an error
      ++count; //increment the count for the next item
    }
  };
});

为了澄清我所说的“动态”和“非动态”的含义，如果您只需要划分两个面板，您不妨这样做:

app.directive('mySplitter', function($compile) {
  return {
    restrict: 'EA',
    replace: true,
    template:
      '<div class="splitter">'+
        '<div class="splitter-pane1">Pane 1</div>'+
        '<div class="splitter-handle"></div>'+
        '<div class="splitter-pane2">Pane 2</div>'+
      '</div>'
  };
});

显然，另一种方法更加灵活。