使用Angular伪指令加载部分内容不会在第二次加载视图时呈现

Question

我正在构建使用离子框架的应用程序。 我想这更多是AngularJS issuse而不是离子issuse。

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

       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键单击具有以下代码的函数。

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时，视图将正确地加载了局部视图。 但是，当我返回另一页面后已经单击的页面上的按钮时，该视图不会加载部分视图。 我可以在调试时在元素中看到html。 我整天都在敲这个。 任何帮助，不胜感激。

Answer 1

由于缓存，您的视图彼此冲突。

使用属性cache-view = false 禁用缓存 。

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