I have a Breadcrumb navigation that allows users to toggle between two partial views (pvA and pvB).
<ol class="breadcrumb">
<li>pvA</li>
<li>pvB</li>
</ol>
<div id="pvA" name="pvA" ng-if="partialViewIdToShow === 1">
#Html.Partial("_pvA")
</div>
<div id="pvB" name="pvB" ng-if="partialViewIdToShow === 2">
#Html.Partial("_pvB")
</div>
What is best practice to share data between these two views?
The data shared between the two views comes from the same database table.
If data is added to pvA it should be available in pvB and visa versa.
Related
This will be very easy for you Angular monsters out there. I have two views ( a list view and a grid view) each in a partial html that is injected via ng-include on a click of a button. Like this:
<div class = "bar">
<h1>Contacts</h1>
</div>
<div ng-show="layout == 'list'" class="list">
//ng-include for the list page is here
</div>
<div ng-show="layout == 'grid'" class="grid">
//ng-include for the grid page is here
</div>
How can I initiate one of those views? grid for instance. I imagine it's done with ng-init. but I can't figure it out
Thanks!
You can initialize an variable either using ng-init or in controller variable declaration:
ng-init="layout === 'list'"
$scope.layout = 'list'
ng-repeat is very useful, however I am finding my application needing dynamic insertion of ng-repeats
Is it possible to insert html dynamically into the view from one of the javascript controllers?
Alright; my specific use-case is the following:
I have a nested ng-repeat in my view:
<div id="sunti_grid">
<div class="sunti_contain" ng-repeat="sunti in showable_suntis track by $index">
<div class="individual_sunti" ng-click="descendents(sunti.short_id); update_ancestor(sunti);" ng-dblclick="update_ancestor(null);" ng-class="{active_sunti : actively_selected_sunti == sunti.short_id}">
<div class="sunti_content" ng-bind="sunti.content"></div>
<div class="sunti_tags" ng-bind="sunti.tags"></div>
<div class="sunti_author" ng-bind="sunti.author"></div>
<div class="sunti_shortid" ng-bind="sunti.short_id"></div>
<div class="sunti_ancestor" ng-bind="sunti.ancestor"></div>
<div class='rating_contain' ng-show="is_user_authenticated">
</div>
</div>
<div class="sunti_reply_carriage_wrapper" ng-if="descendents(sunti.short_id).length > 0">
<div class="sunti_reply_carriage">
<div class="individual_sunti reply_carriage_sunti" ng-repeat="descendent in descendents(sunti.short_id)">
<div class="sunti_content" ng-bind="descendent.content"></div>
<div class="sunti_tags" ng-bind="descendent.tags"></div>
<div class="sunti_author" ng-bind="descendent.author"></div>
<div class="sunti_shortid" ng-bind="descendent.short_id"></div>
<div class='rating_contain' ng-show="is_user_authenticated">
</div>
</div>
</div>
</div>
</div>
</div>
So basically, sunti_grid has an ng-repeat that makes a long list of suntis and each sunti can have descendents. The descendents appear in a "carriage" that manifests immediately below the given sunti.
Now, when a user clicks on a descendent (kinda like a magically-appearing row-drop-down) I want to inject yet another carriage.
Here is a simple schematic to illustrate the feature so far:
[sunti]
[sunti]
[sunti]
[d][d][d][d][d]..
[sunti]
[sunti]
[d][d][d][d][d][d]...
Now I want to be able to inject another carriage of descendents for each descendent-row.. kinda like
[sunti]
[sunti]
[d][D][d][d][d][d]...
[D2][D2][D2][D2]...
[D3][D3][D3]...
so clicking on [D] would make the [D2] row appear, and clicking on one of the [D2]s would make row [D3] appear...
The only thing I can think of so far is to use the controller to inject a new ng-repeat for every new descendent row.
Suggestions welcome. What would be a good (read: maintainable) way of dynamically inserting ngRepeats?
I need to share data across controllers. So I have my shared array returned from a service and then inject the service into any controllers that need to access it.
angular.module('mappingLayers', [])
.constant('MODULE_VERSION', '0.0.3')
.service('layersAvailableToMap', function () {
return [];
});
;
I'm also using the MVC4 template, and the RenderBody calls one of two different index.cshtml
pages/views
_Layout.cshtml
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">My Title</p>
</div>
<div class="float-right">
<section id="login">
Hello, <span >#User.Identity.Name</span>
</section>
<nav>
<ul id="menu">
<li>#Html.ActionLink("Portfolio", "Index", "Home")</li>
<li>#Html.ActionLink("Profile", "Index", "Profile")</li>
</ul>
</nav>
</div>
</div>
</header>
<div data-ng-app="portfolioApp">
<section >
#RenderBody()
</section>
</div>
The problem arises when I switch between index.cshtml pages (via Portfolio and Profile ActionLinks and rendered through RenderBody()) and my shared data service array gets recreated - i.e. one for each page.
So, the question is, how do I share my service across controllers in different pages rendered via RenderBody from my _layout page.
Injecting the service in multiple controllers within one of the pages works fine.
Incidentally, switching between the two index.cshtml pages (i.e. calling RenderBody) seems to cause a full page refresh/callback, when I don't think it should. This might point towards the problem?
Thanks.
I have multiple collections which i want to display as a vertical menu. So should I, for each menu, create a view and then load these views in one single-main view?
Here is what I want to achieve:
<div id="menu1">
<span><h2>MENU 1</h2><span>
<ul>
<li>menu1_link1</li>
<li>menu1_link2</li>
<li>menu1_link3</li>
<ul>
</div>
<div id="menu2">
<span><h2>MENU 2</h2><span>
<ul>
<li>menu2_link1</li>
<li>menu2_link2</li>
<li>menu2_link3</li>
<ul>
</div>
<div id="menu3">
<span><h2>MENU 3</h2><span>
<ul>
<li>menu3_link1</li>
<li>menu3_link2</li>
<li>menu3_link3</li>
<ul>
</div>
Should I create a model and a collection and a json file for each one of them?
I would create 3 collections, 1 for each menu.
Every menu item will be model. So you can render titles like this this.model.get('title')
"So should I, for each menu, create a view and then load these views in one single-main view?"
It depends on your file structure, you can achieve this multiple ways, do you use requirejs?
this is my basic scenario. For a list of items (summary view) i want to show details view of item that got clicked on the same page.
I took this jsfiddle example and transformed it into this jsfiddle. If you look at the behavior it does work for first time but it is not consistent.
Maybe someone can help me with this, or suggest a better approach. I would like to have a different controller for managing the list and a different controller to handle the detail view.
One way of transforming the example (provided that you want to use ngSwitch) would be:
<ul ng-controller="ListController">
<li ng-repeat="item in items" ng-controller="ItemController">
<div ng-click="open(item)">{{item.content}}</div>
</li>
<hr>
<ng-switch on="anyItemOpen()">
<div ng-switch-when="true">
<div ng-controller="ItemController">
{{opened.name}}: overlay: tweet, share, pin
</div>
<a ng-click="close()">close</a>
</div>
</ng-switch>
</ul>
And here is the working jsFiddle: http://jsfiddle.net/pkozlowski_opensource/sJdzt/4/
Your jsFiddle didn't work since you were trying to reference item created in the ngRepeat scope (and thus not available outside of the ngRepeat).