How to CONCATENATE js and angularjs expressions?

Question

I am redirecting to another page using onClick js function. But I want to include query string to the given URL. The query string consists of an ID which I am getting from angularjs expression. I am having trouble in combining the two expressions.

Code:

<div class="col-md-1 col-sm-1 padding10 left-border" onclick="window.location=RootURL+'pages/contest/contestdetail.ui.php?cID=83'">{{x.MemberPosition}}</div>

In the above code, I want to replace cID= 83 to something like cID= x.ContestID. I am getting the value of {{x.ContestID}} correctly.

try my answer stackoverflow.com/a/28536641/454869 It will work and you view will look better — oxfn
– oxfn, Commented Feb 16, 2015 at 8:02
Tell us about results. If any answer was useful, please, vote and accept it — oxfn
– oxfn, Commented Feb 16, 2015 at 13:52

oxfn · Accepted Answer · 2015-02-16 07:42:29Z

1

I recommend to do it this way

Controller:

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

app.constant('RootUrl', function() {
    return '/';
});

app.controller('YourCtrl', ['$scope', '$location', 'RootUrl' function($scope, $location, RootUrl) {
    $scope.gotoContest = function(id) {
        var url = RootUrl + 'pages/contest/contestdetail.ui.php?cID=' + id;
        $location.url(url);
    };
}]);

View:

<div class="col-md-1 col-sm-1 padding10 left-border" ng-click="gotoContest(x.ContestID)"></div>

answered Feb 16, 2015 at 7:42

oxfn

6,8802 gold badges30 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rebornix · Accepted Answer · 2015-02-16 07:25:32Z

0

In Angular, you should use $window instead of window

A reference to the browser's window object. While window is globally available in JavaScript, it causes testability problems, because it is a global variable. In angular we always refer to it through the $window service, so it may be overridden, removed or mocked for testing

Or $location instead of window.location

The $location service parses the URL in the browser address bar (based on window.location) and makes the URL available to your application. Changes to the URL in the address bar are reflected into the $location service and changes to $location are reflected into the browser address bar.

BTW, if you want to use $location in the view directly, remember to bind $location to the controller's scope like

.controller('myController', function($scope, $location) {
  $scope.$location= $location;
});

answered Feb 16, 2015 at 7:25

Rebornix

5,2701 gold badge25 silver badges26 bronze badges

9 Comments

Farjad Hasan Over a year ago

In the current scenario, should I use ng-click = "$window.href = RootURL+'pages/contest/contestdetail.ui.php?cID={{x.ContestID}}"?

Rebornix Over a year ago

check my update. window.location's Angular replacement is $location, so you can change it to ng-click ="$location.path(RootURL+'pages/contest/contestdetail.ui.php?cID=' + x.ContestID)"

Farjad Hasan Over a year ago

I have implemented, <div class="col-md-1 col-sm-1 padding10 left-border" ng-click="$location.path(RootURL+'pages/contest/contestdetail.ui.php?cID={{x.ContestID}})‌">. I also declared $location variable in controller. But I am getting an error.

Rebornix Over a year ago

does it work now? I suppose we don't need double brackets in ng-click.

Farjad Hasan Over a year ago

I also tried it without brackets but it still gives an error.

Error: [$parse:lexerr] http://errors.angularjs.org/1.3.8/$parse/lexerr?p0=Unterminated%20quote&p1=s%2023-77%20%5B'pages%2Fcontest%2Fcontestdetail.ui.php%3FcID%3Dx.ContestID)%E2%80%8C%E2%80%8B%5D&p2=%24location.path(RootURL%2B'pages%2Fcontest%2Fcontestdetail.ui.php%3FcID%3Dx.ContestID)%E2%80%8C%E2%80%8B T/<@http://localhost:8080/sportscash/scripts/angular_1.3.8.min.js:6:416

|

Collectives™ on Stack Overflow

How to CONCATENATE js and angularjs expressions?

2 Answers 2

Controller:

View:

Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Controller:

View:

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related