javascript - angularjs:这段示例代码逻辑上有点看不懂

查看:93
本文介绍了javascript - angularjs:这段示例代码逻辑上有点看不懂的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

下面这段代码有注释的地方是我不懂的地方,还请大神帮我解释下,这个是个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
        };
    })

解决方案

第一个$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...

这篇关于javascript - angularjs:这段示例代码逻辑上有点看不懂的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆