Issue using the Angularjs $location provider and ASP.NET MVC action links together

Question

I have an application that uses both ASP.NET MVC and Angularjs. I'm using the Angularjs $location provider to modify the search part of the url when filters are added or removed.

$location.search(searchObj);

I am then subscribing to the $locationChangeSuccess event and using signalr to update the data on the page without requiring an asp.net post each time a filter is changed.

$scope.$on('$locationChangeSuccess', onRouteChanged, false);

All of the above works, however, I also have some mvc action links on the page that I need to work when clicked.

<a href="@(Url.Action("Details", "Video"))/{{item.id}}">
...
</a>

Unfortunately, when clicking those links, the url is updated but the mvc post doesn't happen. If anyone knows how to make this work I would be grateful.

Answer 1

By default, the link in directive a is handled by AngularJS's route module. If you want to make a API request, you can make the call using $http module either wrapped in a service or factory or just in the controller.

Try this:

<a href="" ng-click="showVideo(@(Url.Action("Details", "Video"))/{{item.id}})">

$scope.showVideo = function (url) {
    $http.get { method: 'GET', url: url }).
    success(function (data, status, headers, config) {
        // this callback will be called asynchronously
        // when the response is available
    }).
    error(function (data, status, headers, config) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
    });
}