Mixing Static and Dynamic Elements in Header - javascript

I am relatively new to angulerjs but using routes, services, controllers etc, I can develop a standard web application with a navbar header with pages appearing in an ng-view below it, i.e.
<body>
<header>
navbar goes here
</header>
<div class="content-wrapper" ng-controller="MainController">
<div ng-view></div>
</div>
</body>
At the moment, everything that appears between the <header> tags is completely static and doesn't change regardless of what page is loaded within the ng-view.
I now need to add a number of items to the header which is contextual based on what page is in ng-view.
So, I'll have a single bar across the top of the site (like stackoverflow). It will contain two sub elements - one will be floated to the left and will be static, the other will be floated to the right and it's contents will be dynamic.
I'm unsure how to accomplish this in angularjs because I believe a page can only contain one ng-view
Any advice would be appreciated
EDIT: Adding following explanation:
To give a little more context, one of the DIVs in the header will contain contextual buttons. E.g. if the site is displaying a product item, the buttons in the header will be 'Edit', 'Delete'. If the site is displaying an invoice, the buttons in the header will be 'Add Product', 'Send Invoice'. My header is basically like Youtube's, if the buttons on the right changed based on the type of page being displayed

I'm not entirely sure of exactly what you're trying to set in the header based on ng-view, and you may want to rethink some of the structure here if you're just starting out. In general, though, you can nest things a little differently to give you access to objects within MainController's $scope:
<body>
<div ng-controller="MainController">
<header>
{{customHeader}}
</header>
<div class="content-wrapper">
<div ng-view onload={{customHeader = 'something new'}}></div>
</div>
</div>
</body>

Related

How Do I Simply Find Out If A Element Is In Viewport?

I want to add a "lazy" animation for a section of a site, and have it fade back out of view when being scrolled past. Ive tried looking at quiet a few different options but nothing seems to stick. I also have a class with another subclass to save me css code in the long run since the site has several sections.
So far if I can figure out how to check viewport relative to this element and how to get a value to come back true when it is I can simply trigger a class to apply with the animation attached.
I have been throwing around some vanilla JS since im not every familiar with Jquery but here is the test div ive been trying to play with.
` <div class="content">
<h1>test </h1>
</div>
<div class="content one">
<h1>test 1</h1>
</div> `
So content is left alone and the specific .content.one is the one that has the class added.

Using component dynamically for different views

What I want to achieve is the following:
I have a Layout with the following parts:
Header
Main (here various views are loaded based on the route where you are, in this example just Account.vue)
Footer
Example route: localhost:8080/account (It will load: Account.vue)
In this route I want to load a component called: Section.vue. This will be html code with various DIV blocks: a header, content and footer structure.
<template>
<div class="header">{{ Title }}</div>
<div class="main">{{ Form or anything else }}</main>
<div class="footer">{{ Save Button }}</footer>
</template>
My idea is to be able to manage this block in 1 place in terms of styling. (So in Section.vue). So if I make an adjustment in terms of design, everything will be applied immediately where Secton.vue is loaded. This saves me a lot of work. I want to dynamically supplement the content of this block with Account.vue with a title in the header. In the content a form with various fields and in the footer a save button.
The only problem I run into now. Where do I start to get this done?
I want to load Section.vue getting loaded into Account.vue as I need it there and want to fill this component with some header, content en footer things which are nessecary for the view of Account.vue
Your question is not very clear, but if I understand you correctly maybe vue slot will help you achieve your goal.
Here is the docs: https://v2.vuejs.org/v2/guide/components-slots.html

Separate navbar Ctrl for one-page application

I am building a one page application with AngularJS. Right now I am using just one controller which is one very long file (of course there are several factories but nevertheless the Ctrl is still full). So as I could divide my page into navbar and the body, i thought of having a separate Ctrl for the navbar. (the thing is here, the navbar includes a big options dropdown and some other stuff, so not just Title and Links) However I do not really how to do that. Right now my main.html file looks like the following:
<div ng-include="'views/templates/navbar.html'" id="navbarContainer"></div>
<div id="map-container" class="container-fluid">
<leaflet id="map" lf-center="hamburg" markers-nested="true" layers="layers" defaults="defaults" markers="markers" class="map"></leaflet>
</div>
So as you can see, my navbar is a template in the main html file. Additionally the navbar and the main html should have the same route. So now, I definitely do not know how to use a second Ctrl. Do I not use the ng-template or can I just give the ng-template a separate Ctrl than the part below?
The navbar.html file can include its own controller.
Navbar.html
<div ng-controller="NavbarCtrl">
<!-- your code -->
</div>
See the Controller: Scope Inheritance Example in the AngularJS Docs for more info.

AngularJS: Tab panes vary in HTML markup, I want them to be created dynamically and filled with data provided by factory service

I'm building a tabbed interface for displaying posts from various social networks (timelines) but not all tabs will have the same HTML markup. My factory service is returning JSON response so that part is fine.
Also, a sidebar contains tabs onto which I put ng-click for opening appropriate panes.
Now, I'm wondering if I should proceed with creating a custom directive to reside inside my tab-pane wrapper:
<div class="tab-pane">
<div timeline=""></div>
or
<timeline></timeline>
</div>
If so, I'm unsure whether $compile is the right approach? I've read that it is rarely used but it seems to me that it would allow me to dynamically decide which custom directive template to use, based on the clicked tab.
If there is a better approach to the solution, let me know. I'm really new to AngularJS but I'm eager to learn it, and learn it properly, applying best practices whenever possible.
The easy way might be:
<div class="tab-pane" ng-repeat="tab in tabs" ng-switch="tab.network">
<div ng-switch-when="Network_A">
/* Template for Network A here... */
</div>
<div ng-switch-when="Network_B">
/* Template for Network B here... */
</div>
<div ng-switch-when="Network_C">
/* Template for Network C here... */
</div>
</div>
So, you will need to add a network attribute to the tab objects, which tells what is the type of the social network.
Using directives might be a more efficient solution, but also more complicated.

How can I embed a webpage within another and isolate CSS

I need to embed one webpage within another, the inner page will be wrapped by a <div> and not contain the <html>, <head><title> or stuff like that, however, the inner page can contain <link>'s to CSS that I don't want to affect the outer page
I currently fetch the HTML with AJAX and insert it into the outer DOM, to workaround the styles conflicting I extract any links prior to embedding into the DOM, fetch that CSS with AJAX, parse the styles and apply them inline using jQuery selectors.
That has obvious problems with things like pseudo-selectors, however, the main problem is that styles from the outer page affect the inner page, I cant reasonably reset every possible style, and I need to access the inner pages dom so using an iframe is out of the question.
Its a fairly complex setup, but I was wondering if anyone had seen anything along similar lines or had a nicer approach.
Cheers
Dale
You could assign a unique id to the div and prepend the selector to all the rules in the css.
HTML Before
<div>
<!--start ajax content -->
Content
<!--end ajax content -->
</div>
CSS Before
a {color:#999;}
HTML After
<div id="unique0001">
<!--start ajax content -->
Content
<!--end ajax content -->
</div>
CSS After
#unique0001 a {color:#999;}

Categories