how to load angular $scope data into a location.href?

Question

I have the following

    <div>
        <div ng-repeat="data in datas" title='{{ data.name }}' onClick="location.href='\{{ data.name }}'" >{{ data.name }}</div><br/>
    </div>

in my angular file i have

 var mainApp= angular.module('mainApp',[]);

 mainApp.controller('formCTR',['$scope','$http',function($scope,$http){
   $http.post('/here',{ data: 'something' }).success(
       function(data){
          $scope.datas=data;
       }
   )
  }]);

when i do the click the url shows

http://localhost:3000/url/{{ data.name }}

how do i display the name of the data inside the onClick to

http://localhost:3000/url/right_name

thanks

have you tried using ng-click. [this stack overflow question](http://stackoverflow.com/questions/14201753/angular-js-how-when-to-use-ng-click-to-call-a-route), [or this one](http://stackoverflow.com/questions/24696238/change-url-location-on-click-the-div) — , Dec 19 '15 at 23:02
@luis what is the scope of data it is var or $scope variable and if it is scope variable then your $http configuration and html page scope is same or different ? please provide fiddle or code with controller and html so we understand the scope of your prgram — Keval Bhatt, Dec 20 '15 at 04:43

hally9k · Answer 1 · 2016-05-05T18:06:50.230

0

Use ng-click instead of onClick...

Controller

...
$scope.redirect = function(route) {
   $location.path('/' + route);
}
...

Template

<div>
    <div ng-repeat="data in datas" title='{{ data.name }}' ng-click="redirect({{ data.name }})" >{{ data.name }}</div><br/>
</div>

...or use an anchor tag and ng-href.

<div>
    <div ng-repeat="data in datas" title="{{ data.name }}"><a ng-href="\{{ data.name }}">{{ data.name }}</a></div><br/>
</div>

edited May 05 '16 at 18:06

answered Dec 19 '15 at 23:12

hally9k

2,423
2
25
47

`ng-click` doesn't know what `location` is...it's not within controller scope... it is a window global – charlietfl Dec 20 '15 at 03:28
thank @hally9k , the second one worked!, wished the first would worked too so i won't have to write another css for the a tag. – luis Dec 20 '15 at 04:08
No the first one won't work unless and until you expose `$location` service on your `$scope` object. You can only access properties added(exposed) on the $scope object. In general it is not a good practice. See my answer below for details – Aditya Singh May 05 '16 at 17:54
@hally9k After looking at your code, you don't need the single quotes within `ng-href` after the double quotes – Aditya Singh May 05 '16 at 18:00

score 0 · Answer 2 · answered May 05 '16 at 17:59

If you want to do redirection in angular, you can use either of the 2 steps using 'ng-click' using a click handler or 'ng-href' with a url as below:

<div>
<div ng-repeat="data in datas" title='{{ data.name }}' ng-click="redirect(data.name)" >{{ data.name }}</div><br/>
</div>

and in your controller scope add the redirect function

$scope.redirect = function (route) {
  $location.path('/' + route);
}

This approach allows you to use the same function for redirection to multiple routes by changing the parameter.

The second method is an easy and elegant approach, if you just need redirection using the ng-href directive:

<div>
  <div ng-repeat="data in datas" title='{{ data.name }}'>
    <a ng-href="/{{ data.name }}">{{ data.name }}</a>
  </div><br/>
</div>

how to load angular $scope data into a location.href?

2 Answers2