let us say we have a
Click Here
in the angular based application.
$scope.myFunction= function(){
// how to get the href
$http.get(href).success(function(data) {
})
}
the requirement is to click the and do a ajax request and get the json data from the server. since I choose to work on the angular, I don't know how to it in angular, since I don't know how to get the href attribute from the element
Try:
Click Here
Js:
$scope.myFunction= function(href){
// how to get the href
$http.get(href).success(function(data) {
})
}
DEMO
I using angularjs 1.5 and $event.target.href didn't work in my app.
I had to do this:
<a ng-click="$event.preventDefault();vm.openToolTip($event);" href="J3606">position 36.06</a>
js
function openToolTip(event){
var href = event.currentTarget.attributes["href"].nodeValue;
alert(href);
}
Related
I am facing one issue while setting the a tag value dynamically using Angular.ja ui-router. I am providing my code below.
<a ui-sref="{{mastUrl}}" ng-show="isMaster">Master Info</a>
$scope.mastUrl='app.ownerinfo.owner.vew';
var url='../service/admin/login/checkmenu.php';
var method='GET';
var data='';
DataService.connectToServerSideScript(method,url,data)
.then(function(response) {
console.log('menu',response);
if (response.length > 0) {
angular.forEach(response,function(obj){
if (obj.user_type==2) {
$scope.isUser=false;
if (obj.isMast==0) {
$scope.isMaster=false;
}else{
$scope.isMaster=true;
if (obj.mastUrl !='') {
$scope.mastUrl=obj.mastUrl;
}
}
}
})
}
},function(error) {
})
Here I have default value of app.ownerinfo.owner.vew for $scope.mastUrl but inside the service I need to set it dynamically. As per my current example it value is app.ownerinfo.owner.new inside the service success response. But the generated output HTML of a tag is coming like below.
<a ui-sref="app.ownerinfo.owner.new" ng-show="isMaster"
href="#!/ownerinfo/owner/view">Master Info</a>
My routing code is given below.
.state('app.ownerinfo',{
url:'/ownerinfo',
templateUrl:'view/ownerinfo.html',
controller:'ownerinfoController'
})
.state('app.ownerinfo.owner',{
url:'/owner',
templateUrl:'view/owner.html',
controller:'ownerController'
})
.state('app.ownerinfo.owner.vew',{
url:'/view',
templateUrl:'view/ownerview.html',
controller:'ownerviewController'
})
.state('app.ownerinfo.owner.new',{
url:'/new',
templateUrl:'view/newowner.html',
controller:'newownerController'
})
Here ui-serf value is set as expected but href value is same as default value. I need to set both value same.
I think a better way is to use the ng-click tag to a controller method and in that method use the $window.location.href = 'URL'; syntax to redirect the user. That way, your redirect (url building) stays in the controller logic.
You can use ui-state directive, which allows dynamic links:
<a data-ui-state="selectedState.state" data-ui-state-params="{'myParam':aMyParam}">
Link to page {{selectedState.name}} with myParam = {{aMyParam}}
</a>
Here is github discussion about the same problem: github
And here the 3rd answer that helps you: answer
I have am trying to use a very simple scrollTo in Angular 1.x. I have naviagation menu link which when clicked should scroll to a div#id. I can only get this to work with a 'promise'.
For example, this works:
<li>Go to Tracking</li>
$scope.tracking = function() { // go to tracking when header button is clicked
$http.get('/includes/modules/get_home_destinations.php')
.then(function(reply){
if (reply.data) {
$scope.destinations = reply.data;
$location.hash('home-tracking');
}
});
};
But this doesn't respond:
$scope.tracking = function() { // go to tracking when header button is clicked
$location.hash('home-tracking');
};
It's as if a promise is required, but to get this to work on the simple click without the promise?
This is because of href="#" as I guess. Because firstly, href redirects page to "#" then the promise is executed with time delay and redirect back page to the desired location. But without promises, there is no time delay, code is executed immediately and href redirects page to '#' and page stuck there.
Hope this below code will be usefull :
in html file
<div id="home-tracking">
<h1>Home Traking Content</h1>
</div>
<a ng-click="tracking()">Go to Tracking</a>
in controller file
angular.module('trackingApp').controller('TrackingCtrl', function($location, $anchorScroll) {
$scope.tracking = function() {
$location.hash('home-tracking');
$anchorScroll();
}
})
I'm using this AngularGrid system and everything is working so far, except when i refresh the page.
In the doc there is an orientation on how to solve this:
To get the reference of instance you need to define angular-grid-id on the element which you can get back by injecting angularGridInstance to any controller or directive. Using your id you can refresh your layout ex : angularGridInstance.gallery.refresh();
And this is what I did:
html
<ul class="dynamic-grid" angular-grid="pics" angular-grid-id="mypics" grid-width="300" gutter-size="10" refresh-on-img-load="false" >
<li data-ng-repeat="port in Portfolio" class="grid" data-ng-clock>
<img src="{{port.img[0]}}" class="grid-img" />
</li>
</ul>
app.js
.directive('myPortfolio', ['mainFactory','angularGridInstance', function (mainFactory,angularGridInstance) {
return {
restrict: "A",
link: function($scope) {
mainFactory.getPortfolio().then(function(data) {
$scope.refresh = function(){
angularGridInstance.mypics.refresh();
}
$scope.pagedPortfolio = data.data;
})
}
}
}])
But if I refresh the page, it still doesn't work. There is some boxes but without image loaded and it's not inside the grid system. Also, I have no errors in my console. When this happens, I can only see the images again if I change to another page and then go back to my portfolio page.
Any ideas on how to solve this?
I think you don't need angularGridInstance and refresh function here. Just change
refresh-on-img-load="false"
to
refresh-on-img-load="true"
in your view.
I am getting the data from javascript object using below method in another page.I want to use this data to print on html page using angular js....Below is snippet of code I am using.
app.controller('tableCtrl', function($scope,$http,$window) {
console.log($window.result);
});
But it is not working
Try
$window.document.write(result);
will overwrite current document and write your result
$window.document.write(result);
if you want it in any of you html page include below snippet
in Html
<div ng-controller="tableCtrl">
<span ng-bind="result"></span>
</div></code>
in tableCtrl
$scope.result = result; //whatever your result is
i am using angularjs directive to redirect another html page.i am writing click function inside directive but i am getting page name in alert box not redirect to another html page.
sample.html:
<test1>
<button data-ng-click="click('/page.html')">Click</button>
</test1>
sample.js:
app.directive('test1',['$location', function(location) {
function compile(scope, element, attributes,$location) {
return{
post:function(scope, element, iAttrs,$location) {
scope.click=function(path)
{
alert("click"+path);
$location.path('/path');
};
}
};
}
return({
compile: compile,
restrict: 'AE',
});
}]);
i want to redirect page.html how to do this please suggest me.
Thanks.
In html,
<button ng-click="redirect()">Click</button>
In JS,
$scope.redirect = function(){
window.location = "#/page.html";
}
Hope it helps.....
Would probably make a small modification.
inject $location and use:
$scope.redirect = function(){
$location.url('/page.html');
}
The benefits of using $location over window.location can be found in the docs, but here's a summary as of (1.4.x)
https://docs.angularjs.org/guide/$location
If anyone knows how to make this redirect directly from the html in a cleaner way please let me know because I would prefer that sometimes over making a function in the controller...
I have succeeded navigation PAGE with below code in AngularJS.
$scope.click = function ()
{
window.location = "/Home/Index/";
}
In case you are using material design button 'md-button', you could do this.
I have tried giving attribute href, assigned with the link path. The redirection works well.
This could be tried if it is only redirection and there are no other tasks to be done before redirection.
<test1>
<md-button href="/page.html">Click</md-button>
</test1>