Dealing with inner anchor links after routeProvider loads view template

Vote count:

0

I have a working routeProvider for two simple navigation links. It redirects as stated in this code:

humanApp.config(function ($routeProvider){
  $routeProvider
    .when('/casefilm',
        {
          controller: 'HumanController',
          templateUrl: 'assets/partials/casefilm.php'
        })
    .when('/videos',
        {
          controller: 'HumanController',
          templateUrl: 'assets/partials/videos.php'
        })
    .otherwise({ redirectTo: '/casefilm' });
});

Here's the issue. I have an image carousel that is wrapped in an anchor, which loads a modal dialogue containing an embedded Youtube video. Since the routeProvider dictates that if the URL is not among the stated (/casefilm or /videos), it will redirect to its default /casefilm.

Inside the video template, I need Angular to ignore the anchor links WITHIN that loaded page. How do I do that? Just to be clear, here's a sample snippet inside videos.php:

<div id="videos" class="row">
  <div class="col-md-12">
    <div id="video-carousel">
     <div><a href="#" data-toggle="modal" data-target="#videoModal" data-thevideo="http://ift.tt/1yEsNdx"><img ng-src="assets/images/thumb1.jpg" class="img-responsive" alt=""></a></div>
     <div><a href="#" data-toggle="modal" data-target="#videoModal" data-thevideo="http://ift.tt/12NDpfP"><img ng-src="assets/images/thumb2.jpg" class="img-responsive" alt=""></a></div>
     <div><a href="#" data-toggle="modal" data-target="#videoModal" data-thevideo="http://ift.tt/1yEsNdz"><img ng-src="assets/images/thumb3.jpg" class="img-responsive" alt=""></a></div>
     <div><a href="#" data-toggle="modal" data-target="#videoModal" data-thevideo="http://ift.tt/12NDpfT"><img ng-src="assets/images/thumb4.jpg" class="img-responsive" alt=""></a></div>
     <div><a href="#" data-toggle="modal" data-target="#videoModal" data-thevideo="http://ift.tt/1yEsNdB"><img ng-src="assets/images/thumb5.jpg" class="img-responsive" alt=""></a></div>
     <div><a href="#" data-toggle="modal" data-target="#videoModal" data-thevideo="http://ift.tt/12NDoIS"><img ng-src="assets/images/thumb6.jpg" class="img-responsive" alt=""></a></div>
    </div>
  </div>
</div><!-- #videos -->

asked 1 min ago

ralphcarlo

12

Dealing with inner anchor links after routeProvider loads view template