Angularjs指令，在transcluded内容中包含元素

Question

I'm trying to create a splitter directive using angularjs that looks like this:

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

And i want this as a result:

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

The problem is that I want to put the handler in the middle of the two panes, but i don't know how it can be done using ng-transclude. Here is the 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

Here's one pretty straightforward option, but there are a lot of way you could do it.

I don't think it can be done with templates without making it less dynamic. In other words, your parent "mySplitter" directive could always create the same markup and it would be fine, but if you want to add more myPane to it, then mySplitter template would have to be changed each time. My solution is simply, easy to read, and dynamic (add as many panes as you want and they will get a divider).

For the panes, the tricky part is that you seem to want them numbered in the classnames. I don't know why you need that (I doubt you really do), but I included a solution for that. You use a variable that each run of the directive can see, but is only initialized once. There's a scope that all runs of the directive can see (note where I create the variable count , and then the link function has access to it, but that function runs for each usage of the directive, so each time you can increment it, setting count up for the following directive uses.

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

To clarify what I mean by "dynamic" and "non-dynamic", if you only need two panels divided, you might as well just do this:

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

Obviously, the other approach is more flexible.