I have 3 different code fragments which I'd like to swap out depending on the selection in a select menu.
It works if I include the code inline, but when I try to use ng-includes like this, I get an Angular error and the app fails:
<div ng-switch on="pFilter">
<div ng-include="'includes/parcel_details_incoming.html'" ng-switch-when="Incoming Parcels"></div>
<div ng-include="'includes/parcel_details_forward.html'" ng-switch-when="Exception Parcels"></div>
<div ng-include="'includes/parcel_details_exception.html'" ng-switch-default></div>
</div>
What am I doing wrong here? Does ng-switch not work with ng-includes?
The reason is both the directives ng-include and ng-switch-x use transclusion and you are specifying both on the same element and it is not allowed. Move nginclude to the child of ng-switch element.
<div ng-switch on="pFilter">
<div ng-switch-when="Incoming Parcels"><div ng-include="'includes/parcel_details_incoming.html'"></div></div>
<div ng-switch-when="Exception Parcels"><div ng-include="'includes/parcel_details_forward.html'"></div></div>
<div ng-switch-default><div ng-include="'includes/parcel_details_exception.html'"></div></div>
</div>
This used to work until angular 1.x version but compound transclusion will result in multidir error starting 1.2.x version of angular. Take a look at the change log and this commit.
Related
According to VueJS documentation, v-cloak "directive can be used to hide un-compiled mustache bindings until the Vue instance is ready.". In other word, I can hide a div or something like that, and it will be displayed when vue is ready.
Does VueJS provides its inverse? Something that hides until VueJS is ready?
As simple as:
<div v-if="false">Will be visible until vue is mounted/ready...</div>
Work for all versions.
The element has to be inside your container... if you use to hide your master container, change it that way:
<div id="app">
<div v-if="false">Visible while loading...</div>
<div v-cloak>Visible when ready...</div>
</div>
There plenty of solutions, I think another one will be to use v-if with a false property in data like:
<div v-if="false">Loading Vue....</div>
<div v-cloak>vue loaded</div>
I have a strange issue in angular and ionic. I have the "ifPostExcluded" being called again when exiting to another state.
This is also being called when the repeater has finished loading (notice I have my own directive "on-finish-render") to detect this.
<div ng-repeat="post in postList" on-finish-render="ngRepeatFinished">
<div class="{{post.id}}" ng-if="post.cat.length > 0">
<div class="w-col w-col-4 push-block-wrap" ng-if="ifPostExcluded(post.cat, post.id)">
<div ng-include src="'templates/_loop.html'"></div>
</div>
</div>
I am puzzled as to why this is happening. I found this neat solution but before I implement it I would rather try to solve the issue.
Just for those who are having a similar issue, I solved it by using one time binding as per this post.
AngularJs alternative to ng-if to save digest
We are attempting to upgrade from AngularJS 1.0.7 to 1.2.1. In 1.0.7, we were able to set the controller for an ng-include alongside in the same element, like so
<div data-ng-include="'include1.html'" data-ng-controller="MyCtrl1"
MyCtrl1 would become available to the code inside include1.html.
This breaks when moving to AngularJS 1.2.1 which I have illustrated in this plunkr. If you change the referenced version to 1.0.7 it works again.
I am interested in understanding what has changed/why this is. I tried searching but couldn't find anything or I am not using the right terms.
Additionally, what would be the correct way to specify a controller for my ng-includes?
Why not move the ng-controller from the element having ng-include to inside the template:
index.html:
<div data-ng-include="'include1.html'"></div>
<div data-ng-include="'include2.html'"></div>
include1.html
<div data-ng-controller="MyCtrl1">
<h1>{{Username}}</h1>
</div>
include2.html
<div data-ng-controller="MyCtrl2">
<h1>{{Username}}</h1>
</div>
It seems ngController and ngInclude cannot be used in conjunction with each other since Angular version 1.2:
Issue 1, Issue 2, Issue 3 and SO post.
I have a simple angular app but the template is growing. I want to split it and use the ng-include directive but I can't get it to include correctly.
current template.html
<div class="edit-object-form" ng-show="editable">
<!-- ... -->
</div>
<div class="list-objects" ng-show="!editable">
<!-- ... -->
</div
desired template.html
<div class="edit-object-form" ng-show="editable">
<div ng-include="/partials/edit_objet_form.html"></div
</div>
<div class="list-objects" ng-show="!editable">
<!-- ... -->
</div
The default value of editable is false, but when I switch to true the include directive doesn't work.
Note: I'm using Angular-1.0.7
I'm not able to recreate this issue. Take a look at this plunker that loads two different templates. (The both look odd, since they're templates stolen from other plunkers to allow for xss).
Maybe this issue is caused by the two incomplete div ending tags, that are .
I'm running into some odd behavior when putting an ngInclude inside an ngIf or ngSwitch.
For example, take the following:
<button ng-click="showIncTemplate = !showIncTemplate">Toggle Included Template</button>
<button ng-click="showInlineTemplate = !showInlineTemplate">Toggle Inline Template</button>
<div ng-if="showIncTemplate">
<p>Included template:</p>
<div ng-include="'template.html'"></div>
</div>
<div ng-if="showInlineTemplate">
<h1>Inline Template</h1>
</div>
(http://plnkr.co/edit/gULbwnKb0gQS8DWz0V6U)
The buttons toggle an options to render the divs that follow. The inline example behaves as expected, with the content appearing or disappearing on click.
The div with the child include seems not to include the template when first drawn, but then includes it repeatedly on every subsequent redraw.
What's going on here? I do see some breaking changes around ngInclude, is there some other way I should be doing this? Or is this a bug in Angular?
Edit:
It looks like this is already in the angularjs github issue tracker:
https://github.com/angular/angular.js/issues/3627
They've fixed it in this snapshot:
http://code.angularjs.org/snapshot/