Angular UI Bootstrap Tabs support a "select" parameter.
An optional expression called when tab is activated. Supports $event in template for expression.
What does select offer over ng-click?
Like shown in the documentation, you are able to select a tab external, e.g. via a seperate button. In this case, the ng-click wouldn't work, unlike the select parameter.
Related
Working on angular project where i need to execute a function on an element clicked
using ng-click. Using ng-click on any element won't fire the function except when i use (click) eg
Box 1 -- this does not work
Box 1 -- this works
so where exactly is ng-click useful?
Thank You
There is no ng-click in Angular.
Perhaps you're looking for `on-click="function()"
https://angular.io/guide/template-syntax lists the canonical forms for bindings.
I have a problem with a custom directive that I wrote to simulate a tab view in angular.
This directive has only a method to redirect from a state to another.
This directive works fine.
The template of the directive is a div with a uib-tabset and some tabs that contain the views to show them.
This works fine.
Now I need this feature: from a view in a tab, I need to change view with a state.go(view) and I must also go to the tab which contains that view.
I tried different solutions that I found here or in other forums, but probably my requested feature is different from others.
Thank you.
I resolved with the answer in this link.
Sorry for my repost.
Angular UI bootstrap tabs - Can't change tabs with a button inside a tab
I want to bind body click event to custom directive. I have created a custom directive for drop down. My functionality is I want closed the option list when the user clicks on the body. The html code for drop down is created by using <ul> and <li> tag. I have used the directive several times on the page. but the page now became slow as the no. of usage of directive increased on the page. So i want to know how to dynamically bind and unbind body click event inside the directive. i used $document.bind('click',function(){//function body}); syntax to bind click event. Please help. Thanks in advance
Instead of using JQuery, you can use the link method to manipulate DOM elements and add listeners
See : the AngularJS doc
I hope it may help
I'm trying a pretty unusual approach of rendering a UI Bootstrap tab via AngularJS.
What I'm trying to do is:
Custom directive -- (That creates a) --> UI Bootstrap Markup -- (That renders) --> A Tab
I know that two directive shouldn't edit the same DOM node, so I used
- Priority attribute
- Terminal attribute
To allow my directive to be the first ones that are compiled and only then the Bootstrap directive should work on the DOM node.
My initial markup is something like:
<mytabcontainer>
<mytab title="Tab">Content</mytab>
<mytabcontainer>
That will convert to this Bootstrap markup
<tabset>
<tab heading="Tab">Content</tab>
</tabset>
I correctly transform the custom markup to the Bootstrap one, but it doesn't get correctly displayed.
Here is a Fiddle that shows my current progress: Fiddle
Unfortunately this is the only approach I can use because of previous decisions so please don't just tell me to directly use Bootstrap markup
Hi I would like to customize behavior of the ui-select little bit. I use two bootstap themed ui-select controls on my page with the help of templatecaches. In the template, I wired up arrow button click event using ng-click tag. That way I can easily catch the click event on the arrow button, and in my controller I can open a popup using function, for instance:
<button ng-click = "someFunctionInTheScope()">
For instance if I have two of those ui-select elements in my view, I need to differentiate which arrow button is clicked to display the correct popup. Since I am using the same template for two ui-select controls and since theoretically I can have any number of these controls on my page, I can not easily add a parameter to the method in the template to differentiate which arrow image of which ui-select control is clicked:
<button ng-click= "someFunctionInTheScope(1)">
Because both ui-select control would be using the same template code and 1 would be passed to the controller function for both of them.
Therefore I need to find a more clever way of changing the template dynamically once and for each control.
So I thought about having something like
<button ng-click= "someFunctionInTheScope($select.id)">
but when I debug it I see that functions parameter is undefined, every time it is clicked.
Can somebody please show me how to hack this?
There is no id property on the $select object. You're best bet is to pass something through the scope of the element containing the ui-select boxes. In other words, your code needs to generate a unique identifier for each ui-select box you have. This could be the $index property of an ng-repeat block, a timestamp, or something dependent on other context.
A little more context and I can provide a more specific answer.