How to add Html code dynamically to ion-content? - javascript

I'm working with ionic cross platform and I want to add dynamically a html code inside ion-content and thank you.

<ion-view view-title="Admin-DashBoard">
<ion-nav-bar class="bar bar-header header-all">
<ion-nav-buttons side="left">
</ion-nav-buttons>
</ion-nav-bar>
<ion-content>
<div class="some css">
<div class="some css" ng-include="newPage.url"> </div>
</div>
</div>
</ion-content>
$scope.ratingView = [{
name: 'templates/zzz/zzzz-ratings.html',
url: 'templates/zzz/zzzz-ratings.html'
}];
$scope.newPage = $scope.ratingView[0];
Above code that show , you create add dynamically html page , if you want add html from controller side simply create controller side template with javaScript.

Take a look to ng-bind-html, you must include safe html

Related

How to replace ionic footer elements' text contents?

I'd want to replace the text Check{{product.name}} to Check{{user}} if a condition is true.
I spent hours, tried hidden, display:none, .hide() etc. but none of them worked..
I also tried to create another <a> block for check{{user}} and hide the block if the condition is not true, but it does not work as well....
Wondering if someone could please help! Thanks.
There is my code:
html:
<ion-footer-bar class="bar-positive" ng-if="loggedUser!=user.id" >
check {{product.name}}
</ion-footer-bar>
js:
if (user_name !=''){
//change Check{{product.name}}" to "Check{{uesr}}"
};
Try this
<ion-footer-bar class="bar-positive" ng-if="loggedUser!=user.id" >
<a href="link" id="newtest">
<span ng-show="your_condition"> check {{product.name}} </span>
<span ng-show="!your_condition">Check{{uesr}}</span>
</a>
</ion-footer-bar>
If it is just text your replacing, then it is pretty easy.
$('ion-footer-bar > a').html('Check{{user}}');
It sounds like your problem is within your controller. When ion-footer-bar is outside the content, the scope is not shared with the footer. Make sure you wrap your html with a <div> and define a controller there before do a conditioning logic in your view.
<div ng-controller="mainCtrl">
<ion-header-bar class="bar-stable">
<h1 class="title">Header</h1>
</ion-header-bar>
<ion-nav-view>
<ion-content>
Your content here
</ion-content>
</ion-nav-view>
<ion-footer-bar class="bar-positive">
<span ng-if="loggedUser!=user.id">
check {{product.name}}
</span>
<span ng-if="loggedUser==user.id">
Check{{user}}
</span>
</ion-footer-bar>
</div>
Adding to the first answer, you can also use
angular2 with *ngIf = (condition) inside of or to achieve the same results

repeat div section in the length of list (Ionic)

I have a custom JavaScript file with some function in it. All the functions work perfectly fine.
One of the functions returns a list modules. I would like to repeat in my template the div section as many times is the length of my list.
This is my ionic template file:
<ion-view title="My Marks" id="page7">
<ion-content ng-controller="MyMarks" padding="true" class="has-header">
<div ng-repeat="module in getCourseModules">
<div class="row">
<div class="col">{{module}}</div>
</div>
<div class="row">
<div class="col col-50">Module Mark</div>
<div class="col col-50">{{GenerateRandomMarks[i]}}</div>
</div>
<br>
<br>
</div>
</ion-content>
And this is my controller inside my app.js:
app.controller('MyMarks', function ($scope){
$scope.courseNum = GenerateRandomNumber(0, 9);
$scope.getCourseName = getCourseName(courseNum);//Returns just Text
$scope.getCourseModules = getCourseModules(courseNum); //Returns the list
$scope.GenerateRandomMarks = GenerateRandomMarks(); //Returns a list of numbers
});
How can I repeat the segment of code I need? and in that segment of code, each time is repeated it should display different element of the list {{getCourseModules[i]}}.
I solved the most of it. But I cant figure out the repeat part. If I manually copy/and paste the code it works fine.
You need to use ngRepeat directive.
<div ng-repeat="model in getCourseModules">{{model}}</div>
<div ng-repeat="model in getCourseModules">{{someAnotherArray[$index]}}</div>

Icon in ionic list is not clickable

I have a list in my ionic project with some icons that I want to click. But I cannot get the click to be picked up either by the htmll onclick() or by the AngularJS ng-click. My html looks like this:
<ion-view view-title="CUES - WATCH LIST">
<ion-content>
<div class="notification-message col-80" ng-hide="hideNotificationMessage" ng-click="hideNotificationMessage=true" ng-bind-html="messageContents"></div>
<ion-list>
<ion-item ng-repeat="watchlistitem in watchlist" href="#/app/trailer/{{watchlistitem.id}}">
<div class="watchlist-movie-thumb">
<img class="movie-thumb-image" src="{{watchlistitem.picture}}">
</div>
<div class="col-75 watchlist-title-genre-container">
<div class="watchlist-movie-title">
{{watchlistitem.title}}
</div>
<div class="watchlist-movie-genres">
{{watchlistitem.genres}}
</div>
</div>
<a class="item-icon-right" onclick="alert('you clicked me');" ng-click='remove_movie()'>
<i class="icon ion-trash-a" style="color:black;padding-top:40px"></i>
</a>
<a class="item-icon-right">
<i class="icon ion-ios-upload-outline" style="color:black;padding-bottom:40px;"></i>
</a>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
The fact that even the onclick() doesn't pick up the click is very odd. I have tried changing the z index to 9999 but that has made no difference.
I stumbled across an answer by trying every html mod I could think of.
This is a bit of a bodge but works without compromising the layout.
I simply added a margin-right style to the tag as follows:
<a class="item-icon-right">
<i class="icon ion-ios-upload-outline" style="margin-right:-2px;color:black;padding-bottom:40px;" ng-click='remove_movie()'></i>
</a>
It doesn't seem to matter with respect to fixing the click problem what value I give the margin-right as long as it is there. It does though alter the layout as you would expect.

Unable to add Hangouts button to HTML template within script tags

On my index page, when I add a Hangouts button like below it is drawn & works as expected.
<body ng-app="sampleApp" ng-controller="MainCtrl">
<div class="row">
<div class="col-md-12 m-body">
<div class="m-header-text">
Hello Friend
</div>
<g:hangout render="createhangout"></g:hangout>
<div>
<!-- Insert html view templates here -->
<ui-view></ui-view>
</div>
</div>
</div>
<!-- So on -->
</body>
But when I place it inside a template, which is displayed based on url route, then only the Hangouts button is not drawn & cannot be seen in UI.
<script type="text/ng-template" id="/home.html">
<div class="col-md-12 m-Grid m-rowBg m-border">
<div ng-repeat="peers in lop">
Hey {{peer.username}}
Call Peer <g:hangout render="createhangout"></g:hangout>
</div>
</div>
</script>
Could you please tell me why is it not being drawn
&
what should I do to get the button displayed? It would be of great help !
Using AngularJS.
I had the same issue, and found a solution using Angular directives.
The problem rendering button with Google tag markup is that the rendering executes when the platform.js script loads, which is before Angular loads the template.
So a solution is to call Google API render function after Angular loaded the template. I did it creating an Angular custom directive with a link function :
hangoutButton.directive('hangoutButton', function() {
return {
restrict: 'E',
template: '<div id="hangout-button"></div>',
link: function (scope, element, attrs) {
gapi.hangout.render('hangout-button', {'render': 'createhangout'});
}
};
});
Then you can display it in a template with the custom element :
<div class="col-md-12 m-Grid m-rowBg m-border">
<div ng-repeat="peers in lop">
Hey {{peer.username}}
Call Peer <hangout-button></hangout-button>
</div>
</div>
I solved this by using the angular controller to render with javascript instead of in html markup. Try something like this:
<body ng-app="sampleApp" ng-controller="MainCtrl">
<div class="row">
<div class="col-md-12 m-body">
<div class="m-header-text">
Hello Friend
</div>
<div id="placeholder-div"></div>
<div>
<!-- Insert html view templates here -->
<ui-view></ui-view>
</div>
</div>
</div>
<!-- So on -->
In your controller:
myApp.controller('MainCtrl', ['$scope', function($scope) {
gapi.hangout.render('placeholder-div', { 'render': 'createhangout' });
}]);
Try removing the / from id="/home.html"

just one of the ng-bind-html in page work

I write angularjs application and have this block of code but just first html-bind-html works for me
<div ng-bind-html='newsTitle'>
<div ng-bind-html='newsDetail'></div>
</div>
When i change the priority like this :
<div ng-bind-html='newsDetail'>
<div ng-bind-html='newsTitle'></div>
</div>
It shows newsDetail value.
How many ng-bind-html per page can i declare? why second value doesn't show?
I guess I understand your problem.
<div ng-bind-html='newsTitle'> <!-- This will replace the content of the div with $scope.newsTitle -->
<div ng-bind-html='newsDetail'> <!-- So this won't appear, because it has been removed by ng-bind-html='newsTitle' -->
</div>
</div>
Look my comments in the code. So if you put newsDetails in the first place, the binded HTML ($scope.newsDetail) will replace the current content aswell.
In a word, ng-bind-html replace the current content of your element with the binded HTML you provide. So you shouldn't put HTML in those elements.
You just have to do something like this :
<div class="news">
<div ng-bind-html='newsTitle'></div>
<div ng-bind-html='newsDetail'></div>
</div>
Some docs about ngBindHtml directive : https://docs.angularjs.org/api/ng/directive/ngBindHtml
If it's real copy of your html. Then I suppose that it's problem with structure. Please close your block:
<div> </div>
You can try and write it like this
<div><span ng-bind-html='newsTitle'></span></div>
<div><span ng-bind-html='newsDetail'></span></div>

Categories