使用 Angular 指令加载部分视图，在第二次加载视图时不渲染答案

【问题标题】：Loading partial with Angular directives not rendering the second time the view is loaded使用 Angular 指令加载部分视图，在第二次加载视图时不渲染
【发布时间】：2015-09-28 21:13:00
【问题描述】：

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

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

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

【问题讨论】：

您能解释一下为什么要以这种方式在 DOM 中插入内容吗？离子缓存视图，这可能会搞砸。
@KjellIvar 部分视图是可选的，它应该根据输入呈现。加载页面时无法呈现它们。
将ng-if 用于条件...无需将自己的html注入到dom中，实际上也不需要角度中的元素ID
@charlietfl 和 Kjell 谢谢大家。这不是使用 Angular 的最佳方式：尝试插入 HTML。我用 ng-if 重构了使用 JS 设置的标志。代码不起作用，它飞了：D谢谢。

标签： javascript angularjs ionic

【解决方案1】：

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

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

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

【讨论】：

嗯，不完全是我正在寻找的答案，但这解决了问题。谢谢。