ng-include высота отображается как 0 в ionic

Обновлять:

Использование ng-include height равно 0. Ниже я привел полностью упрощенный пример. Мне нужно знать, как это исправить и сделать так, чтобы на странице было написано «Привет».

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

<p>Hello</p>

Исходное сообщение:

Мне нужно выяснить, как заставить мой ng-include отображаться в ng-switch. В настоящее время код не работает. Две вещи происходят не так, как ожидалось. Внешняя кнопка очень маленькая, а подформы, включенные в ng, не отображаются, поскольку их высота равна 0. Пожалуйста, имейте в виду, что я использую Ionic, что означает, что у меня нет доступа к *.height().

ПРИМЕЧАНИЕ. Я показываю только шаг 1 из ng-switch, иначе это было бы слишком громоздко.

<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://plnkr.co/edit/XQB7MTP9fyXdir2EOopM?p=preview

А также этот планкер: планкер


person AntiPawn79    schedule 17.04.2017    source источник


Ответы (1)


Вы устанавливаете высоту на 0 в контроллере:

$scope.containerHeight = 0;

person David Poindexter    schedule 17.04.2017
comment
Этот плункер plnkr.co/edit/XQB7MTP9fyXdir2EOopM?p=preview — это то, что я использовал в качестве скелет. Это работает для них. Кажется, вам нужно инициализировать containerHeight для чего-то. Кстати, когда я удаляю, это не решает проблему. - person AntiPawn79; 17.04.2017