Loading partial with Angular directives not rendering the second time the view is loaded

Question

I am buulding an app using ionic framework. I wonder this is more of an AngularJS issuse rather than ionic issuse.

I have following states under main abstract app state.

       app.state('app.a', {
                url: "/a",
                views: {
                    "mainContent": {
                        templateUrl: "app/views/a.html"
                    }
                }

            }).state('app.b', {
                url: "/b",
                views: {
                    "mainContent": {
                        templateUrl: "app/views/b.html"
                    }
                }
            }); 

I have a directive to load partial as following.

app.directive('widthLengthLoadSpeed', function () {

    return {
        restrict: 'E',
        scope: {
            id: '=id'
        },
        scope: true,
        templateUrl: 'app/views/partials/width.length.load.speed.htm.html'
    }
})

On a.html I have a button which has ng-click to a function which has following code.

angular
.element(document
  .getElementsByClassName("widthLengthLoadSpeedBeforethis"))
        .prepend(
      $compile('<width-length-load-speed id="StraightRunning_'+$scope.$id+'">
               </width-length-load-speed>')($scope));

    if ($scope.$root.$$phase != '$apply' &&
        $scope.$root.$$phase != '$digest') {
         $scope.$apply();

and on b.html the button is linked to function with the code.

angular
    .element(document
      .getElementsByClassName("widthLengthLoadSpeedBeforethis"))
            .prepend(
          $compile('<width-length-load-speed id="circular_'+$scope.$id+'">
                   </width-length-load-speed>')($scope));

        if ($scope.$root.$$phase != '$apply' &&
            $scope.$root.$$phase != '$digest') {
             $scope.$apply();

The views are loaded correctly with partials when I click the button on a.html and go to b.html and viceversa. However, the view doesn't load the partial when I go back and click button on one the pages that I have already been after being on another page. I can see the html in the element though while debugging. I am banging on the this the whole day. Any help with be appreciated.

Answer 1

Your views are conflicting each other due to caching.

Disable cache with an attribute cache-view = false .

<ion-view cache-view="false" view-title="My Title!">
  ...
</ion-view>