In my application the index page is like
<div ng-if="isLoggedIn>
<div ng-view>
</div>
<div ng-if="!isLoggedIn">
<div ng-if="type==='admin'">
<div ng-view>
</div>
</div>
<div ng-if="type!=='admin'">
<div>.....</div>
<div ng-view>
</div>
</div>
</div>
So basically i have different ng-views for different views. The problem here is when user is not logged in ,login page is displayed using ng-view.But upon login the ng-view initializes with login page again (may be becoz of $route.current is already set).
When user clicks log in button he/she is directed to home page and again redirected to login page. so no change is displayed on the page.
This issue can be solved using ng-show/hide insted of ng-if. But that creates another issue that controllers are called twice becoz of two ng-view in the dom and also element can't be referred using id becoz two elements are generated fro the same id. So this solution can't be used.
Is there any way of solving it?
Multiple & Nested ng-view won't work on the same page.
You need take a look at angular ui-router which would be great to use in your case, you could also use nested ui-view using angular ui-router
Or may be you can avoid ng-if using ui-router
Related
I have a simple search form which I have it included in two different pages using ng-include directive. I would like to bind them both to the same scope in such a way that when the user navigates between the pages, they'll keep seeing the same search data they've entered in either of the copies.
I have managed to implement an untidy solution using rootScope, but would like to know if this can be implemented in a proper, cleaner way?
I also used root scope slove it, my layout below:
<div id="page-header" ng-include="'views/layouts/header.html'"></div>
<div id="content">
<div ui-view="content" ng-cloak></div>
</div>
<div id="page-footer" ng-include="'views/layouts/footer.html'"></div>
<div id="toastElement">
<ul id="toastBox"></ul>
</div>
header.html bound HeaderController, the functions in HeaderController include search, login, logout, register and both working on $rootScope. Is it helpful?
I am initialising a scope variable to false in controller
$scope.created=false;
However when the page loads for the fist time still the below message flickers once and then hides. Is there a way to stop this flicker and hide it fully when the page loads for the first time.
<div class="alert alert-success" ng-show="created">A new Entity created successfully.</div>
add ng-cloak to your div, it hides it until the controller is loaded.
Jay,
You can try this:
<div ng-init="created=false">
<div class="alert alert-success" ng-show="created">A new Entity created successfully.</div>
</div>
And finally you can create a function that makes the variable created be true.
Look an example: Plunker
When I change the path of the page, my ng-view keeps its contents until the new ones are loaded by my routeProvider. Is there a way to hide them immediately and display a spinner till the new ones load?
See this fiddle regarding loading screen (can customize as necessary): http://jsfiddle.net/KmXTy/1/.
I think what you are looking for though is ng-cloak. It hides ng elements until Angular is ready for them.
<div id="template1" ng-cloak>{{ 'hello' }}</div>
<div id="template2" ng-cloak class="ng-cloak">{{ 'hello IE7' }}</div>
See https://docs.angularjs.org/api/ng/directive/ngCloak.
Also, this may be helpful: Angularjs: How to display loading-icon when using 'resolve' in $routeProvider?.
Would like to know the best way to preserve state between tabs. I use bootstrap tabs and angular ui-router. I've a google map in one of the tabs and don't want to reload the map when user selects that tab. Please advise.
Thanks
I think what you are looking for is discussed in this issue: https://github.com/angular-ui/ui-router/issues/63
They are mostly discussing iframes but I believe the same should hold for Google Maps. Unfortunately in the thread they decided that this isn't something that should be implemented in the core release. I haven't tried out the directive they provide (if I get a chance I'll let you know how it goes) but you may be able to get something working with that.
I have actually come across the exact problem you had. My solution was to use styled buttons as my tabs and ng-show for the map tab:
<div id="info-btns">
<button class="btn" ng-model="view" btn-radio="'info'">
Info
</button>
<button class="btn" ng-model="view" btn-radio="'map'" ng-click="loadMap()">
Map
</button>
</div>
<div class="content" ng-show="view != map">
<div ui-view="info"></div>
</div>
<div id="map-container" ng-show="view == 'map'">
<div id="map" class="content" sitemap>
</div>
</div>
ng-show simply uses display:none to hide the map and hence doesn't cause a refresh. You will need to trigger the map to load the first time it is not hidden otherwise it will render incorrectly, hence loadMap()
If I get a chance I'll set up a jsfiddle of this in practice.
I have a store webpage and I want to add product blocks when user scrolls down (by infinite scrolling).
Which method should I use to fetch data from server and add it to the dom?
I saw this fiddle for implementing infinite scrolling in angularjs (it runs a loadMore() function when user arrives to end of page), as mentioned above, blocks are store's product and every item should have different scope.
The problem is that I don't know how to structure data in a scope and adding more items to it by ajax requests in the loadMore() function.
My products template:
<section class="more-apps">
<h1>More recommendations</h1>
<div class="loadmore-these">
<!-- ajax requests will load more instances of these three templates -->
<div data-ng-include data-src="'products-template-1.html'"></div>
<div data-ng-include data-src="'products-template-2.html'"></div>
<div data-ng-include data-src="'products-template-3.html'"></div>
</div>
</section>
and every sub-template file is like this with some simple differences:
<section data-ng-repeat="i in [1,2,3,4]">
<h1 data-ng-bind-html="title"></h1>
<div data-ng-bind-html="about"></div>
</section>
Every product has different title and about variables in (it's own?) scope.
I suggest you go through the angularjs official tutorial (basically it's about what you want to do, list products from a webstore) , and specifically the step about $http and services :
http://docs.angularjs.org/tutorial/step_05
If you structure your service to download a range of products according to how much the user scrolled (as in the example you linked to) you should be set.