Question

我有覆盖的角度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>'
  };
}]);

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

Answer 1

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

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

请参阅此plunkr以获取一个工作示例：http://plnkr.co/edit/Q3GVxq5elw8aIgjQKMsQ?p=preview

Answer 2

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

angular bootstrap ui tabs选择选项不起作用

2 个答案: