Hello i am newbie to javascript and angularjs,I have made a function in my troller for opening a website,and i am calling that function on "onclick" of a button",I am getting ReferenceError: openWebsite is not defined when i am trying to do this,my code is as below,Please help me to solve this,thanks in advance.
controller
app.controller('listingdetailController', function ($http, $scope, $pile, $filter, $sce) {
var Catid = '1';
var SearchTxt = 'cay';
var url = encodeURI("");
$http({
method: 'POST',
url: API_HOST+'/webservice/listingdetail',
headers:
{
'Content-Type': 'application/x-www-form-urlencoded',
'caymanauth': caymanauth
},
data: "&Catid=" + Catid + "&SearchTxt=" + SearchTxt,
contentType: 'application/x-www-form-urlencoded'
}).success(function (data)
{
var i;
var Content = ' ';
for (i = 0; i<data['Details'].length; i++)
{
if (Content === ' ')
{
Content =
'<div class="app-page-photo">'+
'<div class="app-hero">'+
'<ul class="image ng-scope" rn-carousel="">'+
'<li style="display: inline-block; transform: translate3d(0%, 0px, 0px);">'+
'<div class="bgimage" ng-style="{background-image: url("images/gallery/01.png")}" style="background-image: url("images/gallery/01.png");">'+
'</div>'+
'</li>'+
'<li style="display: inline-block; transform: translate3d(100%, 0px, 0px);">'+
'<div class="bgimage" ng-style="{background-image: url("images/gallery/02.png")}" style="background-image: url("images/gallery/02.png");">'+
'</div>'+
'</li>'+
'<li style="display: inline-block; transform: translate3d(200%, 0px, 0px);">'+
'<div class="bgimage" ng-style="{background-image: url("images/gallery/03.png")}" style="background-image: url("images/gallery/03.png");">'+
'</div>'+
'</li>'+
'</ul>'+
' </div>'+
'</div>'+
'<ons-list class="app-photo-buttons list ons-list-inner">'+
'<ons-list-item class="list__item ons-list-item-inner list__item--action-buttons" modifier="action-buttons">'+
'<ons-row class="action row ons-row-inner">'+
'<ons-col class="action-col col ons-col-inner">'+
'<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
'<div class="action-icon">'+
'<ons-icon class="ons-icon ons-icon--ion ion-android-call fa-lg" icon="ion-android-call">'+
'</ons-icon>'+
'</div>'+
'<div class="action-label">Phone</div>'+
'</div>'+
'</ons-col>'+
'<ons-col class="action-col col ons-col-inner" onclick="sendEmail(message.Email, message.subject, message.body)";>'+
'<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
'<div class="action-icon">'+
'<ons-icon class="ons-icon ons-icon--ion ion-ios-email fa-lg" icon="ion-ios-email">'+
'</ons-icon>'+
'</div>'+
'<div class="action-label">Email</div>'+
'</div>'+
'</ons-col>'+
'<ons-col class="action-col col ons-col-inner">'+
'<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
'<div class="action-icon">'+
'<ons-icon class="ons-icon ons-icon--ion ion-earth fa-lg" icon="ion-earth">'+
'</ons-icon>'+
'</div>'+
'<div class="action-label">Website</div>'+
'</div>'+
'</ons-col>'+
'<ons-col class="action-col col ons-col-inner">'+
'<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
'<div class="action-icon">'+
'<ons-icon class="ons-icon ons-icon--ion ion-android-share-alt fa-lg" icon="ion-android-share-alt">'+
'</ons-icon>'+
'</div>'+
'<div class="action-label">Share</div>'+
'</div>'+
'</ons-col>'+
'</ons-row>'+
'</ons-list-item>'+
'</ons-list>'+
'<ons-list style="border-top: none;">' +
'<ons-list-item>' +
'<ons-row class="detail-row">' +
'<ons-col style="-webkit-box-flex: 0; flex: 0 0 30px; max-width: 30px ; width=30px">' +
'<ons-icon icon="fa-map-marker" fixed-width="true">' + '</ons-icon>' +
'</ons-col>' +
'<ons-col>' +
'<div class="desc">'+
'<ons-icon class="ons-icon fa-map-marker fa fa-lg" fixed-width="true" icon="fa-map-marker">'+
'</ons-icon>'
+ data['Details'][i]['varCityName']+
'</div>'+
'</ons-col>' +
'</ons-row>' +
'</ons-list-item>' + '<br>' +
'<ons-list-item>' +
'<ons-row class="detail-row">' +
'<ons-col style="-webkit-box-flex: 0 flex: 0 0 30px max-width: 30px width=30px">' +
'<ons-icon icon="ion-home" fixed-width="true">'+'</ons-icon>'+
'</ons-col>' +
'<ons-col>' +
'<div class="desc">'+
'<ons-icon class="ons-icon ons-icon--ion ion-home fa-lg" fixed-width="true" icon="ion-home">'+
'</ons-icon>'+ data['Details'][i]['varPhysicalAddress'] +
'</div>' +
'</ons-col> ' +
'</ons-row>' +
'</ons-list-item>' +
'<br>' +
'<ons-list-item>' +
'<ons-row class="detail-row">' +
'<ons-col style="-webkit-box-flex: 0; flex: 0 0 30px; max-width: 30px ; width=30px">' +
'<ons-icon icon="ion-soup-can" fixed-width="true">' + '</ons-icon>' +
'</ons-col>' +
'<ons-col>' +
'<div class=desc>'+'<ons-icon class="ons-icon ons-icon--ion ion-soup-can fa-lg" fixed-width="true" icon="ion-soup-can">'+
'</ons-icon>'
+ data['Details'][i]['varPOBOXAddress']+
'</div>'+
'</ons-col>'+
'</ons-row>'+
'</ons-list-item>'+
'</ons-list>'+
'<div class=caw-botton>'+
'<ons-row class="row ons-row-inner">'+
'<ons-col class="col ons-col-inner" onclick=gallery.pushPage("book-page.html");>'+
'<div style="border-right: 1px solid rgba(221,221,221,0.6); padding: 12px 0; background: #0ad046; color: #FFF;">'+
'<i class="ion-pose">'+'</i>Book Now</div>'+
'</ons-col>'+
'<ons-col class="col ons-col-inner" onclick=gallery.pushPage("book-page.html");>'+
'<div style="padding: 12px 0; background: #cccccc; color: #FFF;">'+
'<i class="ion-edit">'+
'</i>Write a Review</div>'+
'</ons-col>'+
'</ons-row>'+
' </div>';
}
else
{
'<div class="app-page-photo">'+
'<div class="app-hero">'+
'<ul class="image ng-scope" rn-carousel="">'+
'<li style="display: inline-block; transform: translate3d(0%, 0px, 0px);">'+
'<div class="bgimage" ng-style="{background-image: url("images/gallery/01.png")}" style="background-image: url("images/gallery/01.png");">'+
'</div>'+
'</li>'+
'<li style="display: inline-block; transform: translate3d(100%, 0px, 0px);">'+
'<div class="bgimage" ng-style="{background-image: url("images/gallery/02.png")}" style="background-image: url("images/gallery/02.png");">'+
'</div>'+
'</li>'+
'<li style="display: inline-block; transform: translate3d(200%, 0px, 0px);">'+
'<div class="bgimage" ng-style="{background-image: url("images/gallery/03.png")}" style="background-image: url("images/gallery/03.png");">'+
'</div>'+
'</li>'+
'</ul>'+
' </div>'+
'</div>'+
'<ons-list class="app-photo-buttons list ons-list-inner">'+
'<ons-list-item class="list__item ons-list-item-inner list__item--action-buttons" modifier="action-buttons">'+
'<ons-row class="action row ons-row-inner">'+
'<ons-col class="action-col col ons-col-inner">'+
'<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
'<div class="action-icon">'+
'<ons-icon class="ons-icon ons-icon--ion ion-android-call fa-lg" icon="ion-android-call">'+
'</ons-icon>'+
'</div>'+
'<div class="action-label">Phone</div>'+
'</div>'+
'</ons-col>'+
'<ons-col class="action-col col ons-col-inner">'+
'<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
'<div class="action-icon">'+
'<ons-icon class="ons-icon ons-icon--ion ion-ios-email fa-lg" icon="ion-ios-email">'+
'</ons-icon>'+
'</div>'+
'<div class="action-label">Email</div>'+
'</div>'+
'</ons-col>'+
'<ons-col class="action-col col ons-col-inner" onclick="sendEmail(message.Email, message.subject, message.body)";>'+
'<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
'<div class="action-icon">'+
'<ons-icon class="ons-icon ons-icon--ion ion-earth fa-lg" icon="ion-earth">'+
'</ons-icon>'+
'</div>'+
'<div class="action-label">Website</div>'+
'</div>'+
'</ons-col>'+
'<ons-col class="action-col col ons-col-inner">'+
'<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
'<div class="action-icon">'+
'<ons-icon class="ons-icon ons-icon--ion ion-android-share-alt fa-lg" icon="ion-android-share-alt">'+
'</ons-icon>'+
'</div>'+
'<div class="action-label">Share</div>'+
'</div>'+
'</ons-col>'+
'</ons-row>'+
'</ons-list-item>'+
'</ons-list>'+
'<ons-list style="border-top: none;">' +
'<ons-list-item>' +
'<ons-row class="detail-row">' +
'<ons-col style="-webkit-box-flex: 0; flex: 0 0 30px; max-width: 30px ; width=30px">' +
'<ons-icon icon="fa-map-marker" fixed-width="true">' + '</ons-icon>' +
'</ons-col>' +
'<ons-col>' +
'<div class="desc">'+
'<ons-icon class="ons-icon fa-map-marker fa fa-lg" fixed-width="true" icon="fa-map-marker">'+
'</ons-icon>'
+ data['Details'][i]['varCityName']+
'</div>'+
'</ons-col>' +
'</ons-row>' +
'</ons-list-item>' + '<br>' +
'<ons-list-item>' +
'<ons-row class="detail-row">' +
'<ons-col style="-webkit-box-flex: 0 flex: 0 0 30px max-width: 30px width=30px">' +
'<ons-icon icon="ion-home" fixed-width="true">'+'</ons-icon>'+
'</ons-col>' +
'<ons-col>' +
'<div class="desc">'+
'<ons-icon class="ons-icon ons-icon--ion ion-home fa-lg" fixed-width="true" icon="ion-home">'+
'</ons-icon>'+ data['Details'][i]['varPhysicalAddress'] +
'</div>' +
'</ons-col> ' +
'</ons-row>' +
'</ons-list-item>' +
'<br>' +
'<ons-list-item>' +
'<ons-row class="detail-row">' +
'<ons-col style="-webkit-box-flex: 0; flex: 0 0 30px; max-width: 30px ; width=30px">' +
'<ons-icon icon="ion-soup-can" fixed-width="true">' + '</ons-icon>' +
'</ons-col>' +
'<ons-col>' +
'<div class=desc>'+'<ons-icon class="ons-icon ons-icon--ion ion-soup-can fa-lg" fixed-width="true" icon="ion-soup-can">'+
'</ons-icon>'
+ data['Details'][i]['varPOBOXAddress']+
'</div>'+
'</ons-col>'+
'</ons-row>'+
'</ons-list-item>'+
'</ons-list>'+
'<div class=caw-botton>'+
'<ons-row class="row ons-row-inner">'+
'<ons-col class="col ons-col-inner" onclick=gallery.pushPage("book-page.html");>'+
'<div style="border-right: 1px solid rgba(221,221,221,0.6); padding: 12px 0; background: #0ad046; color: #FFF;">'+
'<i class="ion-pose">'+'</i>Book Now</div>'+
'</ons-col>'+
'<ons-col class="col ons-col-inner" onclick=gallery.pushPage("book-page.html");>'+
'<div style="padding: 12px 0; background: #cccccc; color: #FFF;">'+
'<i class="ion-edit">'+
'</i>Write a Review</div>'+
'</ons-col>'+
'</ons-row>'+
' </div>';
}
}
//
// $scope.call = function (message)
// {
// parent.location.href = "tel:{{message.varPhone}}";
//
// };
$scope.snippet = Content;
}).error(function ()
{
alert("error");
});
$scope.sendEmail = function(email, subject, body){
var link = "mailto:"+ email
+ "&subject=New email " + escape(subject);
+ "&body=" + escape(body);
window.location.href = link;
};
$scope.openWebsite = function ()
{
window.open(url, '_blank', 'location=yes');
};
$scope.deliberatelyTrustDangerousSnippet = function ()
{
return $sce.trustAsHtml($scope.snippet);
};
});
now nothing is happening on its click..!!
Hello i am newbie to javascript and angularjs,I have made a function in my troller for opening a website,and i am calling that function on "onclick" of a button",I am getting ReferenceError: openWebsite is not defined when i am trying to do this,my code is as below,Please help me to solve this,thanks in advance.
controller
app.controller('listingdetailController', function ($http, $scope, $pile, $filter, $sce) {
var Catid = '1';
var SearchTxt = 'cay';
var url = encodeURI("http://www.yahoo.");
$http({
method: 'POST',
url: API_HOST+'/webservice/listingdetail',
headers:
{
'Content-Type': 'application/x-www-form-urlencoded',
'caymanauth': caymanauth
},
data: "&Catid=" + Catid + "&SearchTxt=" + SearchTxt,
contentType: 'application/x-www-form-urlencoded'
}).success(function (data)
{
var i;
var Content = ' ';
for (i = 0; i<data['Details'].length; i++)
{
if (Content === ' ')
{
Content =
'<div class="app-page-photo">'+
'<div class="app-hero">'+
'<ul class="image ng-scope" rn-carousel="">'+
'<li style="display: inline-block; transform: translate3d(0%, 0px, 0px);">'+
'<div class="bgimage" ng-style="{background-image: url("images/gallery/01.png")}" style="background-image: url("images/gallery/01.png");">'+
'</div>'+
'</li>'+
'<li style="display: inline-block; transform: translate3d(100%, 0px, 0px);">'+
'<div class="bgimage" ng-style="{background-image: url("images/gallery/02.png")}" style="background-image: url("images/gallery/02.png");">'+
'</div>'+
'</li>'+
'<li style="display: inline-block; transform: translate3d(200%, 0px, 0px);">'+
'<div class="bgimage" ng-style="{background-image: url("images/gallery/03.png")}" style="background-image: url("images/gallery/03.png");">'+
'</div>'+
'</li>'+
'</ul>'+
' </div>'+
'</div>'+
'<ons-list class="app-photo-buttons list ons-list-inner">'+
'<ons-list-item class="list__item ons-list-item-inner list__item--action-buttons" modifier="action-buttons">'+
'<ons-row class="action row ons-row-inner">'+
'<ons-col class="action-col col ons-col-inner">'+
'<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
'<div class="action-icon">'+
'<ons-icon class="ons-icon ons-icon--ion ion-android-call fa-lg" icon="ion-android-call">'+
'</ons-icon>'+
'</div>'+
'<div class="action-label">Phone</div>'+
'</div>'+
'</ons-col>'+
'<ons-col class="action-col col ons-col-inner" onclick="sendEmail(message.Email, message.subject, message.body)";>'+
'<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
'<div class="action-icon">'+
'<ons-icon class="ons-icon ons-icon--ion ion-ios-email fa-lg" icon="ion-ios-email">'+
'</ons-icon>'+
'</div>'+
'<div class="action-label">Email</div>'+
'</div>'+
'</ons-col>'+
'<ons-col class="action-col col ons-col-inner">'+
'<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
'<div class="action-icon">'+
'<ons-icon class="ons-icon ons-icon--ion ion-earth fa-lg" icon="ion-earth">'+
'</ons-icon>'+
'</div>'+
'<div class="action-label">Website</div>'+
'</div>'+
'</ons-col>'+
'<ons-col class="action-col col ons-col-inner">'+
'<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
'<div class="action-icon">'+
'<ons-icon class="ons-icon ons-icon--ion ion-android-share-alt fa-lg" icon="ion-android-share-alt">'+
'</ons-icon>'+
'</div>'+
'<div class="action-label">Share</div>'+
'</div>'+
'</ons-col>'+
'</ons-row>'+
'</ons-list-item>'+
'</ons-list>'+
'<ons-list style="border-top: none;">' +
'<ons-list-item>' +
'<ons-row class="detail-row">' +
'<ons-col style="-webkit-box-flex: 0; flex: 0 0 30px; max-width: 30px ; width=30px">' +
'<ons-icon icon="fa-map-marker" fixed-width="true">' + '</ons-icon>' +
'</ons-col>' +
'<ons-col>' +
'<div class="desc">'+
'<ons-icon class="ons-icon fa-map-marker fa fa-lg" fixed-width="true" icon="fa-map-marker">'+
'</ons-icon>'
+ data['Details'][i]['varCityName']+
'</div>'+
'</ons-col>' +
'</ons-row>' +
'</ons-list-item>' + '<br>' +
'<ons-list-item>' +
'<ons-row class="detail-row">' +
'<ons-col style="-webkit-box-flex: 0 flex: 0 0 30px max-width: 30px width=30px">' +
'<ons-icon icon="ion-home" fixed-width="true">'+'</ons-icon>'+
'</ons-col>' +
'<ons-col>' +
'<div class="desc">'+
'<ons-icon class="ons-icon ons-icon--ion ion-home fa-lg" fixed-width="true" icon="ion-home">'+
'</ons-icon>'+ data['Details'][i]['varPhysicalAddress'] +
'</div>' +
'</ons-col> ' +
'</ons-row>' +
'</ons-list-item>' +
'<br>' +
'<ons-list-item>' +
'<ons-row class="detail-row">' +
'<ons-col style="-webkit-box-flex: 0; flex: 0 0 30px; max-width: 30px ; width=30px">' +
'<ons-icon icon="ion-soup-can" fixed-width="true">' + '</ons-icon>' +
'</ons-col>' +
'<ons-col>' +
'<div class=desc>'+'<ons-icon class="ons-icon ons-icon--ion ion-soup-can fa-lg" fixed-width="true" icon="ion-soup-can">'+
'</ons-icon>'
+ data['Details'][i]['varPOBOXAddress']+
'</div>'+
'</ons-col>'+
'</ons-row>'+
'</ons-list-item>'+
'</ons-list>'+
'<div class=caw-botton>'+
'<ons-row class="row ons-row-inner">'+
'<ons-col class="col ons-col-inner" onclick=gallery.pushPage("book-page.html");>'+
'<div style="border-right: 1px solid rgba(221,221,221,0.6); padding: 12px 0; background: #0ad046; color: #FFF;">'+
'<i class="ion-pose">'+'</i>Book Now</div>'+
'</ons-col>'+
'<ons-col class="col ons-col-inner" onclick=gallery.pushPage("book-page.html");>'+
'<div style="padding: 12px 0; background: #cccccc; color: #FFF;">'+
'<i class="ion-edit">'+
'</i>Write a Review</div>'+
'</ons-col>'+
'</ons-row>'+
' </div>';
}
else
{
'<div class="app-page-photo">'+
'<div class="app-hero">'+
'<ul class="image ng-scope" rn-carousel="">'+
'<li style="display: inline-block; transform: translate3d(0%, 0px, 0px);">'+
'<div class="bgimage" ng-style="{background-image: url("images/gallery/01.png")}" style="background-image: url("images/gallery/01.png");">'+
'</div>'+
'</li>'+
'<li style="display: inline-block; transform: translate3d(100%, 0px, 0px);">'+
'<div class="bgimage" ng-style="{background-image: url("images/gallery/02.png")}" style="background-image: url("images/gallery/02.png");">'+
'</div>'+
'</li>'+
'<li style="display: inline-block; transform: translate3d(200%, 0px, 0px);">'+
'<div class="bgimage" ng-style="{background-image: url("images/gallery/03.png")}" style="background-image: url("images/gallery/03.png");">'+
'</div>'+
'</li>'+
'</ul>'+
' </div>'+
'</div>'+
'<ons-list class="app-photo-buttons list ons-list-inner">'+
'<ons-list-item class="list__item ons-list-item-inner list__item--action-buttons" modifier="action-buttons">'+
'<ons-row class="action row ons-row-inner">'+
'<ons-col class="action-col col ons-col-inner">'+
'<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
'<div class="action-icon">'+
'<ons-icon class="ons-icon ons-icon--ion ion-android-call fa-lg" icon="ion-android-call">'+
'</ons-icon>'+
'</div>'+
'<div class="action-label">Phone</div>'+
'</div>'+
'</ons-col>'+
'<ons-col class="action-col col ons-col-inner">'+
'<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
'<div class="action-icon">'+
'<ons-icon class="ons-icon ons-icon--ion ion-ios-email fa-lg" icon="ion-ios-email">'+
'</ons-icon>'+
'</div>'+
'<div class="action-label">Email</div>'+
'</div>'+
'</ons-col>'+
'<ons-col class="action-col col ons-col-inner" onclick="sendEmail(message.Email, message.subject, message.body)";>'+
'<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
'<div class="action-icon">'+
'<ons-icon class="ons-icon ons-icon--ion ion-earth fa-lg" icon="ion-earth">'+
'</ons-icon>'+
'</div>'+
'<div class="action-label">Website</div>'+
'</div>'+
'</ons-col>'+
'<ons-col class="action-col col ons-col-inner">'+
'<div style="border-right: 1px solid #ffc22f; padding: 10px 0;">'+
'<div class="action-icon">'+
'<ons-icon class="ons-icon ons-icon--ion ion-android-share-alt fa-lg" icon="ion-android-share-alt">'+
'</ons-icon>'+
'</div>'+
'<div class="action-label">Share</div>'+
'</div>'+
'</ons-col>'+
'</ons-row>'+
'</ons-list-item>'+
'</ons-list>'+
'<ons-list style="border-top: none;">' +
'<ons-list-item>' +
'<ons-row class="detail-row">' +
'<ons-col style="-webkit-box-flex: 0; flex: 0 0 30px; max-width: 30px ; width=30px">' +
'<ons-icon icon="fa-map-marker" fixed-width="true">' + '</ons-icon>' +
'</ons-col>' +
'<ons-col>' +
'<div class="desc">'+
'<ons-icon class="ons-icon fa-map-marker fa fa-lg" fixed-width="true" icon="fa-map-marker">'+
'</ons-icon>'
+ data['Details'][i]['varCityName']+
'</div>'+
'</ons-col>' +
'</ons-row>' +
'</ons-list-item>' + '<br>' +
'<ons-list-item>' +
'<ons-row class="detail-row">' +
'<ons-col style="-webkit-box-flex: 0 flex: 0 0 30px max-width: 30px width=30px">' +
'<ons-icon icon="ion-home" fixed-width="true">'+'</ons-icon>'+
'</ons-col>' +
'<ons-col>' +
'<div class="desc">'+
'<ons-icon class="ons-icon ons-icon--ion ion-home fa-lg" fixed-width="true" icon="ion-home">'+
'</ons-icon>'+ data['Details'][i]['varPhysicalAddress'] +
'</div>' +
'</ons-col> ' +
'</ons-row>' +
'</ons-list-item>' +
'<br>' +
'<ons-list-item>' +
'<ons-row class="detail-row">' +
'<ons-col style="-webkit-box-flex: 0; flex: 0 0 30px; max-width: 30px ; width=30px">' +
'<ons-icon icon="ion-soup-can" fixed-width="true">' + '</ons-icon>' +
'</ons-col>' +
'<ons-col>' +
'<div class=desc>'+'<ons-icon class="ons-icon ons-icon--ion ion-soup-can fa-lg" fixed-width="true" icon="ion-soup-can">'+
'</ons-icon>'
+ data['Details'][i]['varPOBOXAddress']+
'</div>'+
'</ons-col>'+
'</ons-row>'+
'</ons-list-item>'+
'</ons-list>'+
'<div class=caw-botton>'+
'<ons-row class="row ons-row-inner">'+
'<ons-col class="col ons-col-inner" onclick=gallery.pushPage("book-page.html");>'+
'<div style="border-right: 1px solid rgba(221,221,221,0.6); padding: 12px 0; background: #0ad046; color: #FFF;">'+
'<i class="ion-pose">'+'</i>Book Now</div>'+
'</ons-col>'+
'<ons-col class="col ons-col-inner" onclick=gallery.pushPage("book-page.html");>'+
'<div style="padding: 12px 0; background: #cccccc; color: #FFF;">'+
'<i class="ion-edit">'+
'</i>Write a Review</div>'+
'</ons-col>'+
'</ons-row>'+
' </div>';
}
}
//
// $scope.call = function (message)
// {
// parent.location.href = "tel:{{message.varPhone}}";
//
// };
$scope.snippet = Content;
}).error(function ()
{
alert("error");
});
$scope.sendEmail = function(email, subject, body){
var link = "mailto:"+ email
+ "&subject=New email " + escape(subject);
+ "&body=" + escape(body);
window.location.href = link;
};
$scope.openWebsite = function ()
{
window.open(url, '_blank', 'location=yes');
};
$scope.deliberatelyTrustDangerousSnippet = function ()
{
return $sce.trustAsHtml($scope.snippet);
};
});
now nothing is happening on its click..!!
Share Improve this question edited Sep 29, 2015 at 8:23 Jigar Makwana asked Sep 29, 2015 at 6:08 Jigar MakwanaJigar Makwana 2272 gold badges5 silver badges18 bronze badges 2- I've no idea how you use an intrinsic event attribute (which you should avoid because they are awful and have many gotchas) to call a method on the angular $scope object, but your code is trying to call a global. – Quentin Commented Sep 29, 2015 at 6:13
- docs.angularjs/tutorial/step_10 — looks like you should be using ng-click, not onclick. – Quentin Commented Sep 29, 2015 at 6:14
4 Answers
Reset to default 10This part is problematic (among a few others):
onclick=openWebsite(url);
You need to use angular's build-it directive ng-click
<ons-col ng-click="openWebsite(url)">
If you use onclick, you register a native handler for the click event and the browser tries to find the openWebsite() function in the global (window) scope (note: no relation to Angular scopes), where it does not exist.
If you use ng-click, on the other hand, Angular will search for the openWebsite() method in the corresponding scope, which is what you want.
Edit: in case this does not work, please see some of the other answers as well for possible causes (e.g. the Angular app not being bootstrapped properly). I focused on the most apparent (and IMO the most likely cause) of the problem.
Update: With the whole controller posted now, I see the problem. By the time you create that massive HTML snippet on the fly in your controller, Angular has long ago finished processing and bootstrapping everything. This means that when you include the snippet into your page, it does not get piled. Angular does not process the directives such as ng-click in it, does not create scopes, does not create bindings between the scope elements and DOM nodes, etc.
I am afraid you will need to refactor your code quite a lot. That huge HTML snippet should actually be included into your page, there are quite a few possibilities here, for example:
- by using the built-in
ng-includedirective in your "main" template - by writing your own directive that loads that HTML as its template
- by using the
$pileservice to pile the HTML snippet, so that angular does all those things I mentioned above that it does not when you simply include the HTML as a raw unprocessed string.
Saying what would be the best option for use case and describing it in details is beyond the scope of the initial question and the would require too long or an answer. I would suggest to do some more research on Angular and have a look at some smaller toy applications to get a general idea for the "right" patterns to use.
You have a couple of points to check here with the code provided:
Make sure you have assigned your ng-app and ng-controller to the elements wrapping the element you are calling the function within with the proper controller and module names that defines your openWebsite.
As @Quentin stated also ng-click is to be used rather than onClick
Your function does not have a parameter but when called :
$scope.openWebsite = function (url)
{
window.open(url, '_blank', 'location=yes');
};
This is not the main cause though but it shall be checked.
variable is not received in openwebsite(). Write
$scope.openWebsite = function (url)
{
window.open(url, '_blank', 'location=yes');
};
And use ng-click="openwebsite(url)" instead of onclick="openwebsite(url)"
With Angular, you should use (click)="signUpwithEmail()"
Example,
<ion-button (click)="signUpwithEmail()">
Sign up with Email
</ion-button>