Search code examples
angularjsruby-on-rails-4turbolinks

Angular default not applying without <div ng-view>


I am using Rails 4 with Angular and Turbolinks. I am building an online store for my rails app. Basically I only want the Angular app to 'live' in a specific action of one of my controllers (i.e. the store action). I actually have this working. Basically what I do is a call the action and have it render a specific view that has contents looking like this:

<div ng-view>
</div>

This allows me to use Angular's route provider to render a route (within the store) based on my $location. This works fine and good. I can use the route provider to navigate around inside my store sub-app to my hearts content. My problem is that once I render via the Angular view it appears that I am 'jailed' by Angular. For example, if I click on a link outside of the i.e. something on the navbar at the top of the page (linked to a rails route and action), the location changes in the URL but the action is actually not taken (I verified this by inspecting the WEBRick logs). The only thing that comes to mind is doing something hacky such as doing a redirect to $location for the 'otherwise' condition in the route provider (I haven't tried this, it seems like bad design regardless). So, my question is this; once I engage the routeprovider in Angular is there an appropriate way to escape it?


Solution

  • ptd's post supplied the answer I was looking for. Basically what I did was disable click on the .run for the $root element:

    .run(['$rootScope','ngApp','$rootElement', function($rootScope, ngApp, $rootElement) {
        $rootElement.off('click');
     }])
    

    Then, use an ng-click to manually change the location:

    <a ng-click="goToLocation()" href="">Go to Loc</a>
    

    And in the app:

    $scope.goToCart = function() {
       $location.path('/someloc')
    }