Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I have created this jsfiddle:

http://jsfiddle.net/noahgoodrich/CDwfL/1/

I have created a set of directives to manage and manipulate navigational tabs. For some reason, when I try to close a tab, it initially removes the appropriate array element, but then the element is replaced with an empty element. Opening tabs seems to work as expected.

  app.directive('navTabOpen', ['$parse', 'navTabsService', function($parse, navTabsService) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        scope.tabs = navTabsService.tabs;

        element.bind('click', function() {
          var tab = null;
          var b = scope.$eval(attrs.navTabOpen);

          for(var i=0;i<scope.tabs.length;i++) {
            scope.tabs[i].active = null;

            if(scope.tabs[i].tabId == b.id) {
              tab = i;
            }
          }

          if(tab == null) {
            tab = {tabId: b.id, name: b.name, stage: b.status, active: 'active'};
            scope.tabs.push(tab)
          } else {
            scope.tabs[tab].active = 'active';
          }
        });
      }
    }
  }])
  .directive('navTabClose', ['$location', 'navTabsService', function($location, navTabsService) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        scope.tabs = navTabsService.tabs;

        element.bind('click', function() { 
          var tab = null;
          for(var i=0;i<scope.tabs.length;i++) {
            if(scope.tabs[i].tabId == attrs.tabId) {
              tab = i;
            }
          }

          if(tab != null) {
            if(scope.tabs[tab].active == 'active') {
              if(scope.tabs.length == 1) {
                $location.path('/');
              } else if(tab == 0) {
                scope.tabs[1].active = 'active';
              } else {
                scope.tabs[tab-1].active = 'active';
              }
            }

            scope.tabs.splice(tab,1);
            console.log(scope.tabs)
          }
        });
      }
    }
  }])

Can anyone provide insight into how I'm using the navTabsService incorrectly? Or is something with the link() functions in the navTabOpen and navTabClose directives?

share|improve this question
It's a bit difficult to see what you're trying to accomplish with navTabOpen and navTabClose, but I do see that in the navTab directive template you have two directives lying on top of each other in the DOM (<a nav-tab-open><span nav-tab-close></span></a>), and since they both define a click handler, when you click on the x both are called successively, nav-tab-close handler first and nav-tab-open handler immediately after, and I'm not sure if that's what you intended to do when xis clicked. – Stewie 19 hours ago
@Stewie - Do you want to turn this into an answer? That's exactly the source of the problem! – Noah Goodrich 16 hours ago

1 Answer

In your navTab directive (visible in linked fiddle), the directive template defines a span element nested in a tag. Span element uses navTabClose directive while the parent a tag element uses navTabOpen directive. Linking function in both directives define a click handler. Both handlers are executed when x is clicked and this produces unexpected behaviour.

app.directive('navTab', function () {
    return {
      restrict: 'A',
      template: '<li class="{{tab.active}} stage-{{tab.stage}}">'
                  +'<a href="/borrower/{{tab.tabId}}" nav-tab-open="{id: {{tab.tabId}}}" >{{tab.name}}'
                    +'<span class="close" nav-tab-close tab-id="{{tab.tabId}}">×</span>'
                  +'</a>'
                +'</li>',
      replace: true,
      scope: { tab: '=' }
    };
  })
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.