updated: made a smaller poc, in plunkr to show the problem without the entire application around it.
see it here
issue: data-ng-switch works on inline content, but does not remove the previous element when switching using external templates via data-ng-include.
works
<div data-ng-switch="view">
<div data-ng-switch-when="template1">content 1</div>
<div data-ng-switch-when="template2">content 2</div>
</div>
doesn't work
<div data-ng-switch="view">
<div data-ng-switch-when="template1" data-ng-include="'template1.html'"></div>
<div data-ng-switch-when="template2" data-ng-include="'template2.html'"></div>
</div>
Best solution I currently found can be seen in the plunkr
you basically cannot use ng-include on the same dom level as the ng-switch anymore. The same goes for other logical directives like ng-show ng-hide...
adding the ng-include on a child node of the ng-switch-when element works:
<div data-ng-switch="view">
<div data-ng-switch-when="template1">
<div data-ng-include="'template1.html'"></div>
</div>
<div data-ng-switch-when="template2">
<div data-ng-include="'template2.html'"></div>
</div>
</div>
update
Should be fixed in .rc3!
This was confirmed as a bug in the angular rc2 version (confirmation in this google group discussion).
The actual bugticket can be found here.
Related
I have a very simple thing I am trying to do. The ng-click is not working. Any ideas why? Is there a problem with divs that are embedded in another div or am I just too sleepy? That item affected is not included in the code below, but no event is ever registered with the click.
<div ng-switch-when="3" ng-mouseenter="showIcons=true" ng-mouseleave="showIcons=false">
<div ng-if="editPerm" ng-show="showIcons" class="icon_holder" style="width: {{obj.mainwidth}}px;">
<div class="deletebutton"></div>
<div ng-click="equationShow=!equationShow" class="equationspecs"></div>
</div>
<div class="equationBlock">
<div class="eqshow" id="{{obj.itemid}}" ng-show="!obj.showEdit" ng-dblclick="obj.showEdit=!obj.showEdit">
<span mathjax-bind="obj.data.Format_left"></span>=
<span mathjax-bind="obj.data.Format_showequation"></span>=
<span mathjax-bind="obj.data.Format_showsolution"></span>
</div>
If you were able to click on a div with no content in it (sometimes a hard thing to do!), it would simply invert the value of equationShow on the scope.
But that would produce no visible difference. From what I can see in your example, the value of equationShow isn't being used in any way.
Based on your comment, you've probably got a problem with variable scoping.
If, for instance, you did something like this, it'd be more likely to work:
<div ng-init="myVariable = false">
<div ng-if="!myVariable">
<div ng-click="$parent.myVariable = !$parent.myVariable">Show the other div</div>
</div>
<div ng-if="myVariable">
Showing this div
</div>
</div>
I am creating hybrid application and i am facing issue in ng-repeat with native scrolling.
Below are my template file code
<ion-view align-title="center">
<ion-content class="ionic headerWithNav" overflow-scroll='true'>
<ul>
<li ng-repeat="lessondata in AllLessonComing" ng-class="{true: 'showBg', false: ''}[(AllLessonComing).length>0]" ng-click="lessondetailsPage('{{lessondata.id}}')">
<div class="lesson-wrap">
<div class="lesson-img">
<div class="lession-price"> <span>{{lessondata.price}}</span> </div>
<div class="lessonImg-wrap"><img image-lazy-src="{{lessondata.image}}" lazy-scroll-resize="true" image-lazy-loader="bubbles" class="ink" on-finish-render="ngRepeatFinished"/></div>
</div>
<div class="lessonInfo">
<div class="row">
<div class="col col-67">
<h1>{{lessondata.title}}</h1>
<div class="lesson-status">{{lessondata.category_name}}</div>
<div class="row">
<div class="col lesson-location">{{lessondata.City}}</div>
<div class="col">
<div class="lesson-rating"><img src="img/start-rating.jpg"></div>
</div>
</div>
</div>
<div class="col padr-none">
<div class="trainnerImg-wrap">
<div class="trainee-img"> <img src="{{lessondata.coach_image}}"> </div>
<div class="trainee-name">{{lessondata.coach_name}}</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li ng-show="(AllLessonComing).length == 0">
<div class="inner-container"><div class="no-results">No Lesson Found</div></div>
</li>
</ul>
</ion-content>
</ion-view>
As you can see i am using "overflow-scroll='true'" for native scrolling and ng-repeat for the showing my lessons.
This is an image when scope data render first time--
when scope data render first time
And this is an image when i scroll speedily when i scroll speedily
ISSUE:- I don't know why these images and text are reloading or flickering when i scroll speedily
My Code is correct.
ng-repeat was creating issue with the ionic 1.0. Now ionic released new version that is ionic 1.2 and you will see that this issue has been resolved by ionic's developers.
you can update your ionic version easily.
If you are using NPM then use this command
ionic lib update
Check brower.JSON file in www/lib/ionic/ folder. if brower.JSON exists then remove this file.
you will see the mazik of ionic 1.2.
This issue happens on hybrid app. The longer list (and images) the more lag it has. As I can see you are using Ionic, try to use ion-list instead. It could help create a better list view.
p/s: sorry I was not able to made a comment (not enought rep point). So I post it here. Hope it help!
Two more suggestion:
Use angular bindonce to reduce $watchers and faster render
If you are building your app using ionic build for Android, you could use built-in Crosswalk for a stronger webview of your app
If I have two <div ng-view></div> elements on the same page, angular.js only uses the first one. I am looking to have two templates (with two controllers and two partials) rendered on the same page, how do I do that? The code below does not work but I'd like to have something along these lines.
<div class="row">
<div class="large-6 small-12 columns">
<div ng-controller="SitesHomeCtrl" >
<div ng-view>
</div>
</div>
</div>
<div class="large-6 small-12 columns">
<div ng-controller="UsersMeetCtrl" >
</div>
</div>
</div>
ui-router is the best option but if you are going with $routeProvider, you could use ng-include (with ng-show/ng-hide) or ng-switch to achieve the same.
I imagine you're probably going to want to look at ui-router in place of angular's router at this point, as angular's router does not support multiple ng-view elements.
I tried using ng-click to update the variable used in ng-switch, but ng-switch doesn't seem to have picked up the change. See the example here:
http://plnkr.co/edit/jx8DNlrJDuaUBKVwZQtQ
What am I doing wrong?
You're running into scope inheritance issues. See: http://docs.angularjs.org/guide/scope
Fixed version: http://plnkr.co/edit/ENm5HBYno8yHblLlE8CA?p=preview
You just weren't toggling. Try this.
<div ng-switch on="edit">
<div ng-switch-when=true>
<a ng-click="edit=!edit">Cancel {{edit}}</a>
</div>
<div ng-switch-when=false>
<a ng-click="edit=!edit">Edit {{edit}}</a>
</div>
</div>
I've just started working on a project that requires me to learn AngularJS. What I'm trying to do is create two menus that slide into the screen, one from the left, one from the right. When they do this they push the content over.
Currently I can get one or the other to work, but not both. I realize this is because of the way that I'm defining the ng-class. I just can't quite conceptualize how to do it correctly.
<div ng-class="{true:'slide-left', false:''}[toggleSlide]" class="container">
<div class="content">
<button ng-click="toggleSlide = !toggleSlide" class="btn-left">From Left</button>
<button ng-click="toggleSlide = !toggleSlide" class="btn-right">From Right</button>
</div>
<div class="slide-from-left">
<p>Here is information that slides from off screen left.</p>
</div>
<div class="slide-from-right">
<p>Here is information that slides from off screen right.</p>
</div>
</div>
Set up the ng-class syntax like this for what you want:
<div ng-class="{'slide-left':toggleSlide, 'slide-right':!toggleSlide}" class="container">
Also, I'm guessing you were trying to adapt your code to something else you saw, so I'll offer something on that also. Here's an ng-class using ng-repeat's $index to dole out classes for even and odd:
ng-class="['even', 'odd'][$index % 2]"