角度引导 ui 选项卡选择选项不起作用答案

【问题标题】：angular bootstrap ui tabs select option not working角度引导 ui 选项卡选择选项不起作用
【发布时间】：2014-07-01 12:18:32
【问题描述】：

我已经覆盖了 angular ui tabs 指令，以下是来自同一 http://plnkr.co/edit/VABthzUwp50QpS16Gwuy?p=preview 的 plunker。现在我的要求是，当我选择一个选项卡时，我需要调用回调函数。因此我使用了 tab 指令的 select 属性。

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

在我的控制器中，我在我的函数中设置了一个警报，但是该函数似乎没有被调用。这是覆盖指令。

    '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>'
  };
}]);

有没有办法调用这个回调方法？

【问题讨论】：

您在此站点上发布了 13 个问题，其中一些问题有可行的答案，但您尚未将其中任何一个标记为已回答。请花时间在适当的地方将您之前的问题标记为已回答。

标签： angularjs angular-ui-bootstrap

【解决方案1】：

在您的 Tab 指令中，您需要在范围内设置回调函数，如下所示：

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

查看此 plunkr 以获取工作示例：http://plnkr.co/edit/Q3GVxq5elw8aIgjQKMsQ?p=preview

【讨论】：

我试过了，但它似乎没有调用我的回调函数。还有什么需要做的吗？

【解决方案2】：

函数不应该被称为scope.alertMe()而不是scope.select()吗？

【讨论】：