using ng-bind-html in cordova app trying to open external link .
I have installed InAppBrowser plugin
Then i have followed the exact steps from the following
https://gist.github.com/rewonc/e53ad3a9d6ca704d402e
The code with the filter gets executed and the link in it gets changed that is href to window.open code.
But when i click on the link nothing happens.
Anything else i am missing ?
Below is the html that used the ng-bind-html
<div class="card" ng-if="extendedDescription">
<div class="item item-divider">
Ext Description
</div>
<label class="item item-text-wrap">
<span ng-bind-html="extendedDescription">
</span>
</label>
</div>
The span element was wrapped inside the label element because of which none of the events were fired changed
the <label to only contain <span
Related
I'm writing some automated tests on an AngularJS application. I'm trying to click a button but whatever method I try and use, Selenium refuses to find the element.
<div class="row" _ngcontent-c24="">
<div class="column-12 column-center" _ngcontent-c24="">
<div class="buttons column-center" _ngcontent-c24="">
<div class="buttons-container-centred tablet-up" _ngcontent-c35="">
<div _ngcontent-c35="">
<kf-button _ngcontent-c35="" btnstyle="secondary no-outline btn-big" _nghost-c8="">
<button class="secondary no-outline btn-big" _ngcontent-c8="" title="" type="">
<span _ngcontent-c8="">Use a demo room</span>
</button>
</kf-button>
<span _ngcontent-c35="">Instant access</span>
</div>
This is html around the button - button text is "Use a demo room"
I've tried:
element(by.xpath(" full path from FirePath ").click()
element(by. buttonText("Use a demo room").click()
element(by.xpath('//span[#ngcontent("Use a demo room"]')).click
...to mention a few.
Usual error message stating the element cannot be found once the timeout is reached.
Other similar buttons work fine with a full xpath.
Would be really grateful for advice!
Thanks
David
I'm working on a .NET MVC application that has some AngularJS pages in it. I'm trying to use Bootstrap UI Typeahead but it's not quite working properly.
If I start to type in the textbox the autocomplete popup opens with potential matches:
However, if I click on one of the matches nothing happens and the underlying angular model is not updated:
The really strange thing is that if I hit tab while the popup is open the first match will get selected and the angular model is updated appropriately:
This is the template I'm using:
<script type="text/ng-template" id="customTemplate.html">
<div class="search-result search-result--mos ng-scope" ng-if="matches.length > 0">
<ul>
<li ng-repeat="match in matches track by $index" class="search-result__item ng-scope uib-typeahead-match">
<div uib-typeahead-match match="match" index="$index" query="query" ng-bind-html="match.model.value"></div>
</li>
</ul>
</div>
This is the relevant front-end code:
<section class="mos intro" data-ng-controller="MosConverterController as vm">
<div>
<form ng-submit="GetCareers()" class="form form--mos">
<div class="form__row">
<div class="form__col form__col--half-plus">
<label for="MOS" class="form__label">MOS/Rate/Duty Title</label>
<input type="text" ng-model="vm.model.SearchTerm" uib-typeahead="career.value for career in vm.model.CareerResults | filter:$viewValue | limitTo:8" typeahead-popup-template-url="customTemplate.html" id="MOS" class="form__input--text" placeholder="Start Typing" name="MOS" required>
<div>Current Search Term: {{vm.model.SearchTerm}}</div>
<textarea>{{vm.model.CareerResults}}</textarea>
</div>
</div>
</form>
</div>
Here's our angular model. Note that we're using Typescript in this project:
import {MosConverterSearchResult} from "../models";
export class MosConverterModel implements Object {
SearchTerm: string = null;
CareerResults: MosConverterSearchResult[];
SelectedCareer: MosConverterSearchResult;
}
I followed the tutorial from the Angular Bootstrap documentation here for the "Custom popup templates for typeahead's dropdown" section but I can't figure out what I'm doing wrong. I'm sure it's something simple but I just can't figure it out. I should note that adding ng-click to the li element like they have in the tutorial doesn't fix the issue. I've tried it like this before:
<li ng-repeat="match in matches track by $index" class="search-result__item ng-scope uib-typeahead-match" ng-click="selectMatch($index)">
<div uib-typeahead-match match="match" index="$index" query="query" ng-bind-html="match.model.value"></div>
</li>
After banging my head against my desk for a couple of hours I figured out the issue was the ng-if in my template. The example in the tutorial link I posted above uses ng-show. ng-if destroys the DOM element and destroys its scope in the process. That's why nothing would happen when I clicked on an item from the list. Not sure why the tabbing would work though if this was indeed the case. If anyone knows please add a comment or better answer.
I cannot get the tooltip display translated value (using angular translate) from an object in ng-repeat loop:
<div ng-repeat="type in types">
<div>
<span ng-bind-html="type.icon"></span>
<label style="font-size: 20px;">{{type.nameNormal | translate}}</label>
<i class="fa fa-info-circle"
tooltip-class="custom-tooltip"
uib-tooltip="{{'type.descriptionNormal' | translate}}"
tooltip-placement="bottom"></i>
<hr class="hr-no-background">
</div>
</div>
P.S. UI Bootstrap version: 0.13.4
Angular: 1.4.4
if you are using 0.13.4 of ui bootstrap the directives are not prefixed with the 'uib' prefix yet
see http://angular-ui.github.io/bootstrap/versioned-docs/0.13.4/#/tooltip for details
Ok, for those, who will face equal problem in the future: I just didn't put any value into my translation file for the descriptionNormal.
Example:
type.descriptionNormal = "DESCRIPTION"
Translation file:
"DESCRIPTION": ""
This was the case. Now everything work fine.
So it seams the tooltip doesn't get displayed if the value is empty.
So I'm writing a thumbnail display using the Bootstrap css template.
<div class="col-xs-6 col-md-3">
<a href class="thumbnail" data-ng-repeat="(key, value) in vm.photosOfUser" ng-click="vm.doStuff($index)">
<img data-ng-src="data:image/png;base64, {{value}}" data-err-src="./images/icon.png"><!--alt="{{key}}"-->
</a>
</div>
The images are being displayed perfectly. However, when I click each image link, nothing happens. I know it's kind of tricky dealing with ng-repeat with ng-click. I'm new to Angular so I was wondering if anyone could help :)
Thanks in advance!
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