下面这段代码有注释的地方是我不懂的地方，还请大神帮我解释下，这个是个tab切换的效果，如果愿意的话还请帮忙解释下这里面的逻辑，万分感谢！！！
directive('tabs', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
controller: ["$scope", function($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该怎么解释，为什么能直接this.addPane呢
if(panes.length == 0) $scope.select(pane);
panes.push(pane);
}
}],
template: '<div 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>' +
'<div class="tab-content" ng-transclude></div>' +
'</div>',
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: '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +//ng-class="{active: selected}"怎么理解呢
'</div>',
replace: true
};
})
`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: '<div 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>' +
'<div class="tab-content" ng-transclude></div>' +
'</div>',
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: '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +//ng-class="{active: selected}"当selected为true时就class等于active
'</div>',
replace: true
};
})`指令是最难的，我用angularjs几个月了还不会自己写指令你的问题太多了，你需要好好看一下Angular的模型、作用域（scope）、数据绑定。
讲道理学习JS框架从Demo学起并不是一个很好的方式，应该先了解一下框架的原理（DOM渲染、数据绑定、事件传递）。
第一个$scope是依赖注入的一种写法，可以直接写作
controller:function($scope) {
}建议了解angular依赖注入的三种方式。网上资料很多的，我随便贴一篇吧http://www.html-js.com/articl...
第二个 controller本来是指令间通信的一种方式，也就是说 这个controller并不仅仅在这个指令中使用，甚至可能在本指令中不适用，在其他指令中，可以在link函数中传入第四个参数。将这个函数引入进去。 因而，此处的this在其他指令中调用时指向link函数第四个参数的那个对象。 对，没错，就是你上面的pane指令中tabsCtrl这个对象。
第三个，指令中可以自由定义变量的，你可以放心设。并非是ng-repeat设置的，后面你不是还有pane.title么。这些都是在本指令作用域下的变量。
第四个，你可以打印这个scope看一下，就知道为啥要传入scope了。
第五个，ng-class="{active: selected}表示当select为true的时候，给元素添加 active这个类
第六个，我建议你看一下angular指令通信的相关知识或者更多关于指令的知识。不得不说这些绝大部分都属于入门级的问题，先多看，然后多问，一步步来，一下子搞这么个大新闻，自己看着也懵逼。 望采纳 http://www.html-js.com/articl...