角度bootstrap ui選項卡選擇選項不工作

我已經overriden角ui選項卡指令，下面是同一http://plnkr.co/edit/VABthzUwp50QpS16Gwuy?p=preview的蹲點來回。現在我的要求是，當我選擇一個選項卡時，我需要調用回調函數。因此我使用了tab指令的select屬性。角度bootstrap ui選項卡選擇選項不工作

<tab title="Tab 1" select="alertMe()" template-url="tab1.html" active='data.static1'></tab>

在我的控制器中我已經把警報在我的功能，howeevr似乎沒有得到called.Here是被覆蓋的指令的功能。

'use strict'; 

angular.module('ui.bootstrap.tabs', []) 
.directive('tabset', function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    transclude: true, 
    controller: function($scope) { 
     $scope.templateUrl = ''; 
     var tabs = $scope.tabs = []; 
     var controller = this; 

     this.selectTab = function (tab) { 
     angular.forEach(tabs, function (tab) { 

      tab.selected = false; 
     }); 
     tab.selected = true; 
     }; 

     this.setTabTemplate = function (templateUrl) { 
     $scope.templateUrl = templateUrl; 
     } 

     this.addTab = function (tab) { 
     if (tabs.length == 0) { 
      controller.selectTab(tab); 
     } 

     tabs.push(tab); 

     }; 
    }, 
    template: 
     '<div class="row-fluid">' + 
     '<div class="row-fluid">' + 
      '<div class="nav nav-tabs" ng-transclude></div>' + 
     '</div>' + 
     '<div class="row-fluid">' + 
      '<ng-include src="templateUrl"></ng-include>' + 
     '</div>' + 
     '</div>' 
    }; 
}) 
.directive('tab', ['$parse', function ($parse) { 
    return { 
    restrict: 'E', 
    replace: true, 
    require: '^tabset', 
    scope: { 
     title: '@', 
     templateUrl: '@', 
     onSelect: '&select' 
     //active: '=' 
    }, 
    link: function(scope, element, attrs, tabsetController) { 
    scope.$parent.$watch($parse(attrs.active), function (value) { 

     if (value) { 
     tabsetController.selectTab(scope); 
     // scope.onSelect(); 
     } 

    }); 

     tabsetController.addTab(scope); 

     scope.select = function() { 
    alert() 
     tabsetController.selectTab(scope); 
     // scope.onSelect(); 
     } 

     scope.$watch('selected', function() { 

     if (scope.selected) { 
      scope.onSelect(); 
      tabsetController.setTabTemplate(scope.templateUrl); 
     } 
     }); 

    }, 
    template: 
     '<li ng-class="{active: selected}">' + 
     '<a href="" ng-click="select()">{{ title }}</a>' + 
     '</li>' 
    }; 
}]);

有什麼辦法可以調用這個回調方法嗎？

來源

2014-07-01 coder

您已經在網站上公佈和幾個13個問題有可行的答案，但你沒有標記任何答案。請花時間，並在適當的時候回答以前的問題。 –

在你的標籤指令，你需要設置回調函數的範圍，像這樣：

scope: { 
    title: '@', 
    templateUrl: '@', 
    select: "&" 
    //active: '=' 
},

看到這個plunkr的工作例如：http://plnkr.co/edit/Q3GVxq5elw8aIgjQKMsQ?p=preview

來源

2014-07-01 16:11:27

我試過了，但它似乎沒有調用我的回調函數。還有什麼需要做的？ – coder

該函數不應該被稱爲scope.alertMe（）而不是scope.select（）嗎？

來源

2014-07-01 12:23:53 cuttlas

角度bootstrap ui選項卡選擇選項不工作

回答

相關問題