I am trying to build a set of dynamic tabsets with dynamic content,
http://plnkr.co/edit/bhtMin1B1dwwqYvyrpVl?p=preview
1) Clicking on Dashboard opens a new tab with directive
When I provide the content of a as the directive, this gets rendered as a string.
I've tried to use the html bind unsafe and $compile functions to make this run as an Angular component - but haven't be able to
2) Click on menu [Project Management-> Project] shows a list of Sites, on clicking of which I need to open another tab passing a parameter (Proj-ID or Site-Id)
The idea is to call a function on click of the Site Name, I'll open a new tab with content as a directive
But since I am stuck with the previous problem, I am not able to do this
Is this the right way of passing params to the directive.
Right now, the plunkr tries to o/p the tab content as a file, a string and compile - with no success
[I've revised this question with relevant details from a prev question]
SOLUTION FOUND FOR #1:
For some reason ng-bind-html-unsafe doesn't work with Angular Elements.
I had to do create a compile directive http://docs.angularjs.org/api/ng.$compile, based on info I found here on STO
In tabs-directive.html, you can definitely use ngBindHtmlUnsafe. Make sure don't put {{}} around the variable.
String: <div ng-bind-html-unsafe="tab.content"></div>
Related
I have an Angular/Cordova app and I'm trying to figure out how should I handle the HTML SELECT tag. What I would like to do is to open a new window with all the options in a list, the user picks one and returns with that value.
The problem is when I do that I lose all the data I had in the first screen as I am closing it when I move to the second one.
I am using Angular's UI.ROUTER. One thing, which I am not too convinced to do, is to save all data entered into StateParams, and when I return, place it back.
What would be the best approach?
It really depends on the use case. If you need to be able to "deep link" to the view where a link loads the view with the pop-up active then using ui-router and stateparams makes the most sense. If deep linking isn't a concern and the user must always select something then you can just use a service/factory/value/provider in order to share the data between the controllers during the lifetime of the app.
I some links in my application which I want to track the click on those links with the help of GTM. Imagine I have a link to download page like this
<a ui-sref="main.download">Download</a>
I create a tag of type 'Universial Google Analytics' for this click named MainDownloadLink.
How should I define a trigger to fire this tag when that link is clicked? Also note that I don't want to use angularitics library. Imagine that I have no control over the source code. just GTM panel.
I define a trigger of type Clicks-Just Link and I am confused for the condition when this event should be fired.
any help is welcomed.
You must make sure that "link validation" is disabled (since GTM does not consider links without href to be valid).
As long as your links are actually named "Download" it probably would be easiest to use the built-in "click text" variable and set a filter "if click text equals download" on your link trigger.
Else you might want to try to access the "main.download" attribute. The built-in click element variable returns the clicked DOM element, so you'd create a custom variable
function() {
return {{Click Element}}.getAttribute('ui.sref');
}
and then test in your trigger if "{{your custom js var}} equals main.download".
Untested, but basically this should work.
I have a small angular application which was written by a third party and I need to rearrange its layout (e.g. move a search form from the main body to the top menu bar).
Is there a way to determine which controller is triggered when a widget is active? Digging through source is OK and I'm doing it right now. However, I'd prefer something along the lines of a debug message
Widget [widget id] triggered [controller id]
Two ways to figure out the controller:
Check the ng-controller directive in the said HTML.
If you are using ng-route, then find the page URL in your code. Controller class can be defined when specifying routes.
Hope this helps.
I am trying to understand how works the ui.bootstrap accordion in angularjs. In my case of use, I have three accordions of which only the first is allowed to open. The rest of them should not open when the user click on their header until an option is selected from the previous accordion.
Now, I am experimenting with a controller which shows a error message when the user click on the second and third accordeon and, after that, it close them. This is my Plunker with my code:
http://plnkr.co/edit/rSg6Az?p=preview
The part of the error message works fine but I can not get that the accordeon selected is closed when I click it.
Any idea?
Regards:
Adrian Ferreres
First I give you the thanks for your answer and my apologies for my delay to answer it. I didn't tested your solutions because I found two solutions which I like more than you told me. The first was given by Vanya Dineva in the official mail group of Angular:
Here's a couple of things you can try:
Notice the accordionGroup directive uses the collapse directive in its template (https://github.com/angular-ui/bootstrap/blob/master/template/accordion/accordion->group.html )
You can modify and instead of having collapse="!isOpen" you can replace the isOpen with a new variable that you would set to false until your condition is met
Notice the ng-click="toggleOpen()" in the accordion group template (https://github.com/angular-ui/bootstrap/blob/master/template/accordion/accordion-group.html ). Try creating a custom function e.g. ng-click="openIfConditionMet()" and put your logic inside the function
The second was found by myself. I add a modal window to show the error message when a user tries to open an accordion. In the function which closes the window I put the code to close the accordion:
http://plnkr.co/edit/rSg6Az?p=preview
You can use ng-class, and bind it to the value of the option in each previous accordion.
You can probaly warp your assignment to a $timeout but there is already in master the support for is-disabled. https://github.com/angular-ui/bootstrap/commit/9c43ae7c0a66ff454c97296122d8f82c89ac4d5e
You can either build it your self or wait for the next release :-)
I'm trying to solve a problem. I want that when a perform an action or function in the controller to be saved in the brose history. For example, I want to do this:
Type something in a textbox.
Click a link to call a function that will set the string I typed to a variable in $scope and save it at the browser history.
Do the same as the previous step with a different value.
If I click the "back" button from the browser, I want to display the first value I entered.
I have a very simple example of what I want but I don't know what do I have to add to be able to use the "back" and "forward" button from the browser.
http://jsfiddle.net/XMFua/
Thank you very much in advance!
You should use the $location service to set the URL. I don't know how to make it work on jsFiddle, however the following should work:
http://jsfiddle.net/marcenuc/BSDxG/