Question

我正在构建一个Angular应用程序，通过单击每个页面的选项卡可以访问三个页面。这些选项卡具有一个ngClick指令，该指令与自定义构建的“tabs”指令一起使用，该指令允许此功能。

template:
    '<div class="tabbable">' +
      '<ul class="nav nav-tabs">' +
        '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}" id="tab_{{$index}}" class="tab">'+
          '<a href="" id="{{pane.title2}}" ng-hide="pane.selected" ng-click="select(pane, $index)"></a>' +
          '<a href="" id="{{pane.title2}}" ng-show="pane.selected" ng-click="select(pane, $index)"><img ng-src="images/tab{{$index + 1}}_active.png"></a>' +
        '</li>' +
      '</ul>' +
      '<div class="tab-content" ng-transclude></div>' +
    '</div>'

除了为此目的而构建的select（）函数之外，我的代码中还有一些额外的按钮，用于跳转到应用程序中的下一个选项卡。为此，我现在使用jQuery伪随机点击当前活动标签后的下一个标签。

function nextTab() {
    var children = jQuery(this).children();
    var firstChild = jQuery(children[0]).attr('type');

    jQuery('.tab.active').next().children()[0].click();
}

然而，这很有效，我宁愿这样做“Angular Way”而不是将第三部分代码集成到我的功能中。我尝试在$ scope上创建一个函数并通过ngClick指令应用它：

$scope.nextTab = function() {
        $scope.$apply(function() {
            var children = jQuery(this).children();
            var firstChild = jQuery(children[0]).attr('type');

            jQuery('.tab.active').next().children()[0].click();
        });
    };

不幸的是，每当我尝试执行它时，都会返回“inprogress：apply”错误。

我知道这个错误与Angular有关，试图在已经有相同指令的元素上调用$ apply（jQuery的click（）;对抗ngClick）。我不知道的是如何解决这个问题。

有人可以解释我如何通过Angular实现我想要的功能吗？

修改作为参考，我提供了我正在使用的指令。

module
.directive('tabs', function() {
return {
  restrict: 'E',
  transclude: true,
  scope: {},
  controller: function($scope, $element) {
    var panes = $scope.panes = [];

    $scope.select = function(pane, index) {
      angular.forEach(panes, function(pane) {
        pane.selected = false;
      });
      pane.selected = true;

      tabClick(index);
    }

    this.addPane = function(pane) {
      if (panes.length == 0) $scope.select(pane);
      panes.push(pane);
    }

    function tabClick(tabNumber) {
      var tabs = [event_track_brand( 'non-relevant' ), 
                  event_track_brand( 'non-relevant' ),
                  event_track_brand( 'non-relevant' )
                 ];

      tabs[tabNumber];
    }        
  },
  template:
    '<div class="tabbable">' +
      '<ul class="nav nav-tabs">' +
        '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}" id="tab_{{$index}}" class="tab">'+
          '<a href="" id="{{pane.title2}}" ng-hide="pane.selected" ng-click="select(pane, $index)"></a>' +
          '<a href="" id="{{pane.title2}}" ng-show="pane.selected" ng-click="select(pane, $index)"><img ng-src="images/tab{{$index + 1}}_active.png"></a>' +
        '</li>' +
      '</ul>' +
      '<div class="tab-content" ng-transclude></div>' +
    '</div>',
  replace: true
  };
})

.directive('pane', function() {
return {
  require: '^tabs',
  restrict: 'E',
  transclude: true,
  scope: { title1: '@', title2: '@' },
  link: function(scope, element, attrs, tabsCtrl) {
    tabsCtrl.addPane(scope);
  },
  template:
    '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
    '</div>',
  replace: true
  };
});

这基本上是建立在Angular主页上使用的tab / panes指令上。理想情况下，我想在窗格指令中添加一个可用的函数，如下所示：

 scope.nextTab = function() {
      var nextPaneIndex = tabsCtrl.panes.indexOf(scope) + 1;
      var nextPane = tabsCtrl.panes[nextPaneIndex];

      tabsCtrl.select(nextPane, nextPaneIndex);

    };

但我似乎无法使用这样的东西，甚至可以在窗格范围内访问。我仍然无法理解指令是如何工作的，所以如果有人能解释如何完成这项工作，我将非常感激！

Angular Pseudo-使用另一个按钮单击选项卡

0 个答案: