ng-include 高度在离子中显示为 0

Question

更新：

使用 ng-include 高度为 0。我在下面提供了一个完全简化的示例。我需要知道如何解决这个问题并让它显示你好。

<ion-view title="Page">
	<ion-content padding="true" class="has-header">
            <div ng-include="'templates/page30'"></div>
	</ion-content>
</ion-view>

模板/page30 文件在哪里

<p>Hello</p>

原帖：

我需要弄清楚如何让我的ng-include 显示在ng-switch 中。目前该代码不起作用。有两件事没有按预期发生。外部按钮很小，包含 ng 的子表单没有显示，因为它们的高度为 0。请记住，我使用的是 Ionic，这意味着我无权访问 *.height()。

注意：我只展示了ng-switch 的第 1 步，否则会显得过于庞大。

<ion-view title="Some Template" hide-nav-bar="true">
  <ion-content padding="true" class="has-header">
    <div ng-controller="someCtrl">
        <ng-switch on="step">
            <div ng-switch-when="1">
                <div height-bind height-value="containerHeight">
                    <ng-include src="'templates/somepage.html'"></ng-include>
                </div>
            </div>
        </ng-switch>
    </div>
  </ion-content>
</ion-view>

我已经构建了一个如下所示的指令：

llApp.directive('heightBind', function() {
  return {
    scope: {
      heightValue: '='
    },
    link: function($scope, $element) {
      $scope.$watch(function() {
        $scope.heightValue = $element.prop('offsetHeight');
      });
    }
  }
});

ng-include调用的模板如下：

<ion-view title="Services" hide-nav-bar="true">
  <ion-content padding="true" class="has-header">
    <div class="page-header">
      <h1>
        <span>Lawncare</span>Services</h1>
    </div>

    <ul class="list">
        <li class="item item-checkbox">
           Mow Lawn
           <label class="checkbox">
           <input type="checkbox">
           </label>
        </li>
        <li class="item item-checkbox">
           Trim Plants
           <label class="checkbox">
           <input type="checkbox">
           </label>
        </li>
    </ul>
  </ion-content>
</ion-view>

最后一件事。控制器someCtrl 如下所示：（缺少实际的控制器参考，因为我目前在 ionic creator 中工作）

function($scope, $stateParams) {

  // Set the step initially to 1 every time this controllwer is instantiated.  
  // Usually on ng-switch button update the
  // step value via the setStep function provided

  $scope.step = 1;

  $scope.setStep = function(step) {
    $scope.step = step;
  }

  $scope.containerHeight = 0;
}

为了解决这个问题，我查看了其他一些东西。我看过： http://stackoverflow.com/questions/25108780/height-of-container-with-ng-repeat-directive-is-zero

还有这个 plunker： Plunker

Answer 1

您在控制器中将高度设置为 0：

$scope.containerHeight = 0;