I have a tabbed control in a page. I am getting the following error when I pass between tabs:
Error: [$location:ihshprfx] Invalid url "http://backoffice.localhost:3000/#tab_category", missing hash prefix "#!"
Tabs are still working, but browser logs error each time I change tabs.
What should I do in order to avoid those errors?
If you are not already, use Angular Bootstrap, here are the instructions for the tab controller. Using the the tabset directive you will not have to split the tabbar from its contents and the directive handles showing and hiding the tab panels.
Related
Hi all..
referring to ngRoute,
i created a single page application but would like to apply different css rules to each sub-page like background image
how can i do that?
i assigned a different controller to each sub-page
and in the link tag i used ng-href and {{name}}.css to tell the browser to grap the correct css file where is name is giving the value of the file name and attached to the scope inside the corresponding controller.
is there a need to use more than one ng-controller ?
here is the view : http://shireefkhatab.github.io/imax-design
and my code : https://github.com/shireefkhatab/imax-design
hope to get a response
thank you all in advance.
Reefo.
You can include those styles in your template (views) or make separate route for styles, add its view in head section and then change state from your controller using $state.go('where.ever.you.want.to.go');
I have a index.html page with page-header, navigation-bar, page-body sections (DIVs).
I use angular routing for change the content of the page-body section.
Now what I want to implement is to change the the content of the navigation-bar and page-body at same time, from a controller.
My scenario is:
Login content is displayed in the page-body section. After the successful login request I want to switch two contents somehow at same time:
the menu which locates between the navigation-bar div element
the application body content, locates in page-body div element
If you are using ng-route, you should take a look at UI Router. It allows you to define multiple views in your page.
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 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>
i'm working with angular js now for about ke 4 months and despite all the "first step failures" like not emphasising the async way anuglar thinks, I'm facing a problem I don't really understand. It's not that easy to describe.
I have a provider which registrates directives within the routeprovider's resolve function - during config phase. To compile programmatically preconfigured directives I create them on the specific controller call of each route. Acutally the directive I'm adressing here is a complex flotchart directive. It retrieves data from a rest api, transformes the retrieved data and prepares different kinds of option setups like proper stacked line charts or simple piecharts. Every single step takes its time, so I introduced promises to be sure that everthing is at it's right place before I finally call something like "$.plot".
So now I have the following situation: Imagine a singlepage app with two tabs. Each tab - like a first class menu item - refers to a new page with a new controller to process and new partials to render. For each page i have beside other directives one of these heavy flotchart directives to render. actually it takes about 5 seconds to render the chart. So we assume that we really start the app from beginning - like pressing F5. Now I enter the first page the first time and within the mentioned 5 seconds I switch tabs to enter the next page. I get to the next page, see different partials, layouts and stuff and a loading chart - but actually the directive of the first page is still bound to its link phase of that heavy flotchart directive (still preparing options for flot and calculating data to output graphically).
My problem is that this link phase actually really ends within a completely different template/route/controller context and gets stuck. It crashes with a console "replace" error from jquery.flot. I think this error means that flot tries to plot into a div which does not exist anymore. But that error occures just when I switch tabs during the link phase of the first page's heavy flot directive. It doesn't happen when the first page's chart is fully rendered and doesn't happen when the first page's directive hasn't entered its link phase (or am i missing something??). I tried placing some console.logs directly BEFORE hitting the jquery "$.plot" - remember only of the first page chart directive to dive into what's acutally happening. And the strange thing is when I manage to switch tabs within these magic 5 seconds, I still get the console log entries from the first page entry although I'm on a different page. And now guess what. That's strange - acutally two directive link phases are running side by side and one of them on a completely different view (or isn't it completely different, because its a singel page app?). Imagine I plot ("render") the chart in exactly the same div id - like $('#flot-chart'). so I have html parts containing id="flot-chart" on the first page AND on the second. when I now switch from the first to the second page (not finishing the first chart) I get the chart from the first page rendered in the #flot-chart div of the second page and like half a second later the actually correct chart rendered in that same div. So actually the link phase of the first page's chart directive ends in a completely different page in a way showing 2 charts consecutively. I know jquery.flot depends on DOM manipulation via jquery and that might be the problem (perhaps THAT'S the only real explanation for my problem), because jquery DOM manipulation is out from the angular way of life.
Or are there other explanations? I acutally solved the problem via $routeChangeStart listening and killing the $.plot process, but are there some hints, suggestions, explanations for that behaviour?
Plunker flot chart directive DOM collision
I have prepared a plunker which shows kind of a similar behaviour. i've delayed the creation of the directive and the directive's async data and option retrieval methods to somehow mock the behaviour of my app. this is non production code but describes simplified the way my problems occure. when you "fast click" the menu item one after the other many times, you can sometimes force angular to show 2 charts in one page. acutally one directive is linking and doing stuff in a different partial ? i know i'm missing something in my mind ... please give me a hint.
i used chrome for reproducing the error. stop the the plunker and press 'run'. directly after pressing 'run' click as fast as you can both links a couple of times.
Thanks a lot!