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.
Related
I am creating a directive in which template I need to use the a scope's variable value as the name of the directive (or alternatively controller) to load.
Say I have a directive widget that has a template called widget.html which looks like:
<div class="widget widget.type" {{widget.type}} ng-controller="widget.type">
<div class="navBar">
<div ng-include="widget.type + '-t.html'"></div>
<i class="fa fa-close"></i>
<hr>
</div>
<div ng-include="widget.type + '-f.html'"></div>
</div>
Now widget.type is not getting evaluated in the first line. It works fine for ng-include. Say widget.type's value is weather. The first line should then be interpolated first to look like (doesn't matter if class attribute, widget.type-attr or ng-controller is interpolated)
<div class="widget" weather>
and then compiled to include the weather directive.
How can I get widget.type interpolated in the template?
Not an option is to use ng-include to load the directive. I need to use one common template for the widget and want to add/override/extend the base directive with additonal functionality/Variables.
If this is not the way to achieve that, is there a way to extend a directive the OOP-way?
See the plunkr
You can only place interpolation expressions in text nodes and attribute values. AngularJS evaluates your template by first turning it into DOM and then invoking directive compilation, etc. If you try to place {{...}} instead of attribute name, you'll just end up with messed-up DOM.
If you really need to replace a whole directive based on $scope variable value, you'll need to create a directive for application of other directives and do some heavy lifting with $compile (you'll have to completely re-compile the template each time the value changes). I'd recommend trying to find other designs solving your situation before attempting this.
For adjusting your template based on element attributes, see this answer.
I have a conditional ng-include directive with a ng-controller associated, but it seems the controller isn't run when the condition is true.
The target is to include the template only when the condition is met and avoid the TypeError: Cannot call method 'insertBefore' of null issue.
For example:
<div ng-include src="myContent.imgList ? 'ui/image-list.html' : null" ng-controller="ImgListSubCtrl">
</div>
When myContent.imgList is filled with data, I expect the image-list.html template to be appended to the DOM and ImgListSubCtrl to be run, but it isn't.
Is this the expected behavior?. I'm using Ionic Framework with Angular 1.2.17.
Thank you.
I already found an explanation, though further comments are welcome.
The following Codepen shows the mentioned behavior and the solution (in Ionic Framework 1.0.0-beta12): http://codepen.io/anon/pen/FnojD?editors=101
The first include doesn't display any count, though the second one displays it correctly.
It seems that when using ng-include along with ng-controller, the controller is only run once, even when the ng-include src expression evaluates to null.
To run it when the template is actually included (when ng-include src isn't null), a solution is to avoid the conditional ng-include and wrap it in a ng-if block, so the whole element is re-created dynamically, as shown in the Codepen above.
In the example from the question:
<div ng-if="myContent.imgList">
<div ng-include src="'ui/image-list.html'" ng-controller="ImgListSubCtrl">
</div>
</div>
I hope it helps.
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 have a template that is inserted via ng-include and that template also has an ng-include. The inner ng-incude is not being shown. Why?
Main Template:
<div ng-include src="'views/outer.html'"></div>
views/outer.html:
<div ng-repeat="item in items">
// Stuff
<div ng-include src="'views/inner.html'"></div> // not being shown
// More stuff
</div>
The code you posted should work so the problem is probably situated somewhere else.
One of the reasons could be that a JavaScript error is thrown somewhere else or that no items are found in the scope. Make sure to check the browser console.
Here is a working version of your code for your convenience:
http://plnkr.co/edit/pCTInrtITqHraC1hPyZH?p=preview
Hope that helps!
ng-include is a directive. Your view/outer.html should do like this:
$parent.items
Because directive not inherit parent automatically.
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>