PROBLEM
I have a dom element, which i want to detach it from its parent and append it at some other location in the dom, angularjs way.
i could easily do this in jquery with detach and appendto, but i am unable, to find the same in angularjs way.
var detached = jQuery('.toBeDetached');
jQuery('.itemMaximixed').append(detached);
Note i need to detach since the element contains a map in it.
It may not be applicable in your case, but you can use the transclude facility of an Angular directive to do this.
I don't think attaching and deattaching would work. What I can suggest is destroying the recreating the template under different node.
You can use something like ng-if in Angular 1.1.5 for this. Using multiple ng-if and associated conditions you can bind the same template at multiple location, which ever ng-if returns true that template would get loaded.
The template code can be duplicated or be out inside a ng-template script. Something like this
<div id='parent'>
<div id='child1'>
<div ng-if='condition1'><ng-include src='datatemplate' /></div>
</div>
<div id='child2'>
<div ng-if='condition2'><ng-include src='datatemplate' /></div>
</div>
</div>
<script id='datatemplate' type='text/ng-template'>
<!-- Template HTML -->
</script>
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?
<script type="text/ng-template" id="popupTemplate">
<div id="myPopup">
<input type="checkbox" name="backup"/><label for="backup">Backup</label>
</div>
</script>
I want to access the popup div from outside script for adding more check boxes dynamically. I tried using jQuery $("#myPopup") but it is not accessing the element. Is there any way to achieve this?
The template written inside <script type="text/ng-template"></script> will be stored in $templateCache with the given id.
Retrieve the template in your controller using -- $templateCache.get('popupTemplate')
Update it.
Add it back to the $templateCache using -- $templateCache.put('popupTemplate', '__updatedContent__')
How can I add code inside ng-view once(not inside all partials)? I want to have global block which will append or prepend inside ng-view, where I can use scope from current controller.
you can use ng-include inside each template to include the same template in all parts.
dunno know really what you want to do, but with the little info you gave, go to your index.html template and write the code you want to within a block element such as
<div class="your class name">
...
</div>
either before or after
<div ng-view>
</div>
depending on whether it's prepend or append. However, make sure you reference the controller properly.
I would like to apologize that I couldn't provide any code snippet regarding this question, I am a newbie about AngularJS.
<div ng-repeat="item in list" ng-view></div>
Using the code above, would it be possible to render different template which would be dependent on item.type property. I was expecting a result like this:
item.type == "image" returning: <div><img src="'IMAGE_URI'"></div>
item.type == "text" returning: <div><p>TEXT</p></div>
As of now I have create a template html for the enumeration of item.type. Is this concern possible using AngularJS? I've recently learned that ng-view accompannied with ng-route.
I think one way you can do it is to use 'ng-if' to conditionally include html:
<div ng-repeat="item in list">
<div ng-if="item.type == 'image'><img src="'IMAGE_URI'"></div>
<div ng-if="item.type == 'text'><div><p>TEXT</p></div>
</div>
You can have only one ng-view,
take a look at this answer.
from the documentation for ng-view:
ngView is a directive that complements
the $route service by including the rendered
template of the current route into the main
layout (index.html) file.
Every time the current route changes,
the included view changes with it according
to the configuration of the $route service.
Requires the ngRoute module to be installed.
What you're looking for is ng-include, combined with ng-switch,
take a look at this answer on how to combine the two.
ng-include creates a new child scope, which in turn inherits from the controller.
have a look at this answer for more information about the topic.
I've just started looking at AngularJs. I was attempting to use a custom directive inside a tr element. I get the following error regarding the switch directive
Controller 'ngSwitch', required by directive 'ngSwitchWhen', can't be found!
Some sample code is here: http://plnkr.co/edit/YiSFYK5l8mNIlBo6OGFW
Even after I removed the swtich it still doesn't seem to do anything. I changed the repeat direct to be over currentSheetData and removed the swtich entirly but there's no code in the rows.
However in my example I do the same setup inside a div element and it works fine. Would someone explain what I'm doing incorrectly
You need ng-switch directive on the parent node before declaring ng-switch-when on the child node.
Example:
<div class="animate-switch-container"
ng-switch on="selection">
<div class="animate-switch" ng-switch-when="settings">Settings Div</div>
<div class="animate-switch" ng-switch-when="home">Home Span</div>
<div class="animate-switch" ng-switch-default>default</div>
</div>
https://docs.angularjs.org/api/ng/directive/ngSwitch