Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Use ng-if to hide inactive tabs #3109

Closed
wants to merge 3 commits into from
Closed

Conversation

Dawil
Copy link

@Dawil Dawil commented Dec 16, 2014

Hi there. By using ng-if the scope for the tab is destroyed when hidden. If there are a lot of large tabs then this can significantly reduce the length of a $digest cycle. Feel free to close the PR I just thought I'd mention this since I found it gave large performance improvements for my app.

It's also easy for people to add this to their app without forking or modifying the code by simply placing the following code above their application code:

angular.module("template/tabs/tabset.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/tabs/tabset.html",
    "\n" +
    "<div class=\"tabbable\">\n" +
    "  <ul class=\"nav {{type && 'nav-' + type}}\" ng-class=\"{'nav-stacked': vertical, 'nav-justified': justified}\" ng-transclude></ul>\n" +
    "  <div class=\"tab-content\">\n" +
    "    <div class=\"tab-pane\" \n" +
    "         ng-repeat=\"tab in tabs\" \n" +
    "         ng-if=\"tab.active\" \n" +
    "         ng-class=\"{active: tab.active}\"\n" +
    "         tab-content-transclude=\"tab\">\n" +
    "    </div>\n" +
    "  </div>\n" +
    "</div>\n" +
    "");
}])

Note that in some cases this could change the behavior of your code and it's not surprising some of the tests failed. If you did want to in some way merge this change you'd probably rather have it as a configurable option or advise in the docs the ability to override the templateCache.

@realityking
Copy link
Contributor

If this is merged, there needs to be a way to opt out. We sometimes use tabs for forms, and form validation wouldn't be performed on the hidden tabs if this was merged as is.

@karianna
Copy link
Contributor

Build fails and needs tests

@wesleycho
Copy link
Contributor

This needs to be opt-in, not opt-out, as this is a breaking change.

Documentation would also need to be updated about this.

@wesleycho wesleycho added this to the Backlog milestone Mar 31, 2015
@Dawil
Copy link
Author

Dawil commented Mar 31, 2015

I added two commits via the github interface that demonstrate an example of how to make it opt-in by providing a hideTabs flag. I've not tested it nor changed the documentation, this is just an example.

Just to be clear I've already solved this problem in my use case by overriding the templateCache, as described in my original post. Don't feel like I'm pressuring you guys to get this feature in.

@wesleycho
Copy link
Contributor

The only thing missing here is documentation.

@wesleycho
Copy link
Contributor

I am going to close this due to there being adequate workarounds for using ng-if, but keep an eye out for #4836 - we are going to break the current API and fix it.

@wesleycho wesleycho closed this Nov 7, 2015
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants