你的问题太多了，你需要好好看一下Angular的模型、作用域（scope）、数据绑定。
讲道理学习JS框架从Demo学起并不是一个很好的方式，应该先了解一下框架的原理（DOM渲染、数据绑定、事件传递）。

`return {

        restrict: 'E',
        transclude: true,
        scope: {},
        controller: ["$scope", function($scope) {//数组是要注入$scope吧，$scope是指令作用域
            var panes = $scope.panes = [];
            
            $scope.select = function(pane) {
                angular.forEach(panes, function(pane) {
                    pane.selected = false;
                });
                pane.selected = true;
            }

            this.addPane = function(pane) {//这里的this应该是controller
                if(panes.length == 0) $scope.select(pane);
                panes.push(pane);
            }
        }],
        template: '<p class="tabbable">' +
            '<ul class="nav nav-tabs">' +
            '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">' +
            '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +//ng-click="select(pane)"这里面的参数pane是从哪里来的呢，难道是ng-repeat里面可以直接定义，这里面可以直接传？
            '</li>' +
            '</ul>' +
            '<p class="tab-content" ng-transclude></p>' +
            '</p>',
        replace: true
    };
}).
directive('pane', function() {
    return {
        require: '^tabs',//
        restrict: 'E',
        transclude: true,
        scope: {
            title: '@'
        },
        link: function(scope, element, attrs, tabsCtrl) {
            
            tabsCtrl.addPane(scope);//这里为什么传scope参数呢
        },
        template: '<p class="tab-pane" ng-class="{active: selected}" ng-transclude>' +//ng-class="{active: selected}"当selected为true时就class等于active
            '</p>',
        replace: true
    };
})`指令是最难的，我用angularjs几个月了还不会自己写指令