javascript - 使用 Angular 指令加载部分不在第二次加载 View 时呈现

Question

我正在使用 ionic 框架构建应用程序。我想知道这更像是一个 AngularJS 问题而不是 ionic 问题。

我在主要抽象应用程序状态下有以下状态。

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

我有一个加载部分的指令，如下所示。

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

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

在 a.html 上，我有一个按钮，它具有 ng-click 到具有以下代码的函数。

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

在 b.html 上，按钮链接到代码功能。

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

当我单击 a.html 上的按钮并转到 b.html 时， View 会正确加载部分内容，反之亦然。但是，当我返回并单击我在另一个页面上已经访问过的页面上的按钮时， View 不会加载部分内容。我可以在调试时看到元素中的 html。我整天都在敲这个。任何帮助将不胜感激。

Answer 1

由于缓存，您的 View 相互冲突。

Disable cache具有属性 cache-view = false。

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