I want to pass value of scope variable returned from controller in html window.open, but the problem is i get some garbage value, please see the code below.
<header>
<span class="item-title">{{x.name}}</span>
<span class="list-item-note-sendmoney1" onclick="window.open('tel:{{x.phone}}', '_system')"><ons-icon icon="ion-android-call"></ons-icon></span>
</header>
<p class="swipe-item-desc">{{x.phone}}</p>
I want to pass {{x.phone}} to window.open('tel:') function.
Don't use onclick. Use ng-click. And put the JS code in the controller:
ng-click="openWindow()"
and in the controller
$scope.openWindow = function() {
window.open('tel:' + $scope.x.phone, '_system');
}
Related
I've got this template:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" ng-repeat="product in ad.products">
<a href="{{product.link}}">
<h1>{{product.title}}</h1>
<img src="{{product.src}}">
<p>{{product.description}}</p>
<h5>{{product.price}}</h5>
</a>
</div>
</div>
</div>
From my controller I need to evaluate this template so that it checks how many products that have been selected and then it interpolates each product's values into the template. After that is done I also need to remove the ng-repeat so it doesn't fire an error in the external pages that will use this where angular is not present. However I'd figure that I'd just use a regex to look up the ng-repeat and everything in the expression and then remove it.
I've been looking at $interpolate and $compile but I can't figure out how to work with them from my controller so that it does what I want. This is because when I use these on my template and then console log the template value it's a function with a whole lot of nonsense in it.
So doing this:
ad.html = $compile(res.data, $scope);
Generates something like this:
function(b,c,d){rb(b,"scope");e&&e.needsNewScope&&(b=b.$parent.$new());d=d||{};var h=d.parentBoundTranscludeFn,k=d.transcludeControllers;d=d.futureParentElement;h&&h.$$boundTransclude&&(h=h.$$boundTr…
Can someone shed some light on how to achieve what I want?
Your are using $compile function in wrong way, you should call $compile(html) function by passing $scope parameter like below.
var compiledDOM = $compile(res.data)($scope);//then do append this DOM to wherever you want
ad.html = compiledDOM.html(); //but this HTML would not make angular binding working.
I have next Angular JS controllers structure:
<div ng-controller="MainController">
<div ng-controller="mainCtrlTst">
// here is loaded HTML file
</div>
</div>
HTML file:
<div ng-controller="MainController">
<input ng-model="formData.map" value="">
</div>
For default formData.map containts address "USA, New York"
I have method Save() in MainController, but when I call this method I get:
console.log(formData.map); // undefined
How I can get value formData.map from input?
You should declare your model in controller like
$scope.formData = {
map: ''
};
And then use it in the view.
And then check in the save method by following code
console.log($scope.formData.map);
Hope you will not get undefined.
Try the following in MainController:
console.log($scope.formData.map);
To be more precise, in your save() function inside the controller do as follows:
$scope.save = function(){
console.log($scope.formData.map);
}
To know more about $scope, visit : https://docs.angularjs.org/guide/scope
I am using onclick="window.open('tel:+94777122240')" in my angular ionic application. which lets the user to open dial box when onclick. i am trying to pass values to the onclick function withing ng-repeat. but the ng-repeat values doesnt pass to fucntion
i have used this method to solve it. but it does not work
<div ng-repeat="branch in branches">
<a ng-click="window.open('tel:branch.telephone')" class="button">Call Now</a>
</div>
Angular expressions are evaluated against the scope.
Try to move the ng-click function to the controller:
$scope.open = function(branch) {
window.open('tel:' + branch.telephone);
}
<div ng-repeat="branch in branches">
<a ng-click="open(branch)" class="button">Call Now</a>
</div>
Given an EJS template which is rendered with expressJS, I have a variable itemId. How can I use it in the MyCtrl controller?
<script>x="<%=itemId%>"</script>
<div ng-controller="MyCtrl">
</div>
So far I have tried
<script>$scope.x=<%=itemId%></script>
and then in the controller, try to fetch it with $scope.x but it does not work.
You may need to add quotes around your var if it is a string or zero padded number.
<script>x="<%=itemId%>";</script>
<div ng-controller="MyCtrl">
</div>
Also, you need to set it to your $scope'd value (in your controller). Assuming you have your controller in another JS file somewhere else in your code
function MyCtrl($scope){
$scope.x = window.x;
}
I have a site that links to a component through ng-include:
<div id="tracklist">
<ng-include src="'partials/tracks.html'">
</ng-include>
</div>
the partial looks like this:
<div ng-controller="TracklistController">
<div ng-repeat="track in tracks">
<a ng-click="$('body').css('background-color', 'red')" href="#/tracks/{{ track.id }}" class="track-link" data-audio-source="{{ track.source }}">{{ track.trackNumber + " - " + track.title }}</a>
</div>
</div>
It renders fine and works, but my ng-click event does not fire for some reason. Note that changing the body background color is just an obvious test to see if it's failing. I've tried it with my actual function (declared globally when the document loads for now), and I've also tested with console.log. None of it works, so clearly ng-click is just not working. Any ideas?
Make sure you put your function in the controller and assign it to the $scope.
<a ng-click="action();">
function TracklistController($scope){
$scope.action = function(){ ... }
}
ngClick doesn't accept arbitrary JavaScript or functions defined outside of Angular! ngClick accepts an AngularJS expression. For example, data-ng-click="foo()" will call foo on the current scope!