AngularJS ng-transclude意外地与自定义指令一起工作

时间:2016-03-04 05:07:18

标签: angularjs angularjs-directive

我编写了两个嵌套指令,外部指令包含所有内部指令以构建导航。但似乎ng-transclude所有内部指令。我调试了一段时间,但无法弄清楚。以下是指令和html代码段;

angular.module('custom.directives', [])
.directive('navTabs', ['$log', function($log){
    $log.info('instantaiting directive navTabs...');

    var _directive = {
        scope: true,
        restrict: 'EA',
        replace: true,
        transclude: true,
        templateUrl: '/jsex/ab/templates/tabs.html',

        controller: ['$scope', function($scope) {

            $scope.currentTab = 0;

            $scope.tabs = [];

            $scope.selectTab = function(tab) {
                $scope.currentTab = tab;
            }

            return $scope;
        }]
    };

    $log.info('finish instantaiting directive navTabs');

    return _directive;
}])
.directive('navTab', ['$log', '$filter', function($log, $filter){
    $log.info('instantaiting directive navTab...');

    var _directive = {
        scope: true,
        restrict: 'EA',
        replace: true,
        transclude: true,
        require: '^navTabs',
        template: '<div ng-show="showTab()" ng-transclude></div>',
        link: function(scope, element, attrs, navTabs) {

            var tabId = navTabs.tabs.length;

            $log.info("tabId = " + tabId + " - " + attrs.tabHeading);

            navTabs.tabs.push(attrs.tabHeading);

            $log.info($filter('json')(navTabs.tabs));

            scope.showTab = function() {
                return tabId == scope.currentTab; 
            };
        }
    };

    $log.info('finish instantaiting directive navTab');

    return _directive;
}]);
<nav-tabs>
    <nav-tab class="tab-content" tab-heading="First Tab">
        <h1> First Tab</h1>
        <p>Simple tab 1
    </nav-tab>
    <nav-tab class="tab-content" tab-heading="Second Tab">
        <h1> Second Tab</h1>
        <p>Simple tab 2
    </nav-tab>
    <nav-tab class="tab-content" tab-heading="Third Tab">
        <h1> Third Tab</h1>
        <p>Simple tab 3
    </nav-tab>
</nav-tabs>

感谢。

0 个答案:

没有答案