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.

Answer 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>

Answer 2

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;
});