javascript - angular的指令问题

Question

我想写一个类似angularUI的tabset directive，看了一下源码，不是很明白。

HTML结构如下：

html<tabset a="" b="" c="">
    <tab>
    </tab>
</tabset>

JS代码：

javascriptangular.module('angularTabset',[])
.directive('tabset',function(){
    return {
        restrict:'EA',
        replace: true,
        transclude: true,
        templateUrl: 'tabset.html',
        scope:{
            a:'=?',
            b:'=?',
            c:'=?'
        },
        controller:function($scope){
            this.a = $scope.a;
            this.b = $scope.b;
            this.c = $scope.c;
        },
        link: function (scope, iElement, iAttrs) {

        }
    }
})
.directive('tab', function () {
    return {
        restrict: 'EA',
        replace: true,
        require:'^tabset',
        transclude: true,
        templateUrl: 'tab.html',
        controller: function($scope){
            //How to get a,b,c here?
        },
        link: function (scope, iElement, iAttrs,ctrl) {

        }
    };
})

问题：

tab.html模板里用到了tabsetController里的a、b、c属性的值，我想在tabController里访问这三个值并实现双向绑定，该如何写？我试过在link函数里写，但貌似只执行一次，没有实现双向绑定。

Answer 1

这里有两个难点
1 子指令tab 需要使用require:'^tabset', 父指令
然后在link 函数 就可以使用第四个参数ctrl 这个就是父指令的控制器

link: function (scope, iElement, iAttrs, ctrl) {

}

2 传值 一般还是通过标签传值 声明式比较好

建议看一下官方的文档 说的比较清楚 Creating Directives that Communicate
https://docs.angularjs.org/guide/directive

Answer 2

http://www.ngnice.com/docs/guide/directive